What is Nested Border-Radius Calculator?

Nested Border-Radius Calculator is a tool for finding the inner border-radius value that matches an outer radius and the padding between nested elements. It is useful when using the same radius on both layers makes the inner corners look too round or too heavy.

This comes up often in cards, nested panels, button interiors, and other layered UI patterns.

How to Use

1. Enter the outer element's border-radius.
2. Enter the padding between the outer and inner elements.
3. The suggested inner border-radius is calculated automatically.
4. Check the preview and copy the CSS if needed.

Because the result updates in real time, it is easy to test different spacing and radius combinations quickly.

How the Calculation Works

The formula is simple:

Inner border-radius = Outer border-radius - Padding

For example, if the outer radius is 20px and the padding is 8px, the inner radius becomes 12px.

If the padding is greater than or equal to the outer radius, the inner radius is treated as 0px.

Input and Output Example

If you use an outer radius of 48px and a padding value of 16px, the output looks like this:

.outer-element {
  border-radius: 48px;
  padding: 16px;
}

.inner-element {
  border-radius: 32px;
}

Use Cases

• Matching rounded corners between a card shell and its inner content area
• Tuning nested panels or modal interiors
• Adjusting the inner shape of buttons, badges, or focus layers
• Keeping radius rules consistent in a design system

Things to Keep in Mind

• The calculation assumes a simple outer radius - padding relationship
• For asymmetric corners or more complex shapes, visual checking is still a good idea
• Large padding values can reduce the inner radius quickly, so spacing should be reviewed together with the corner size