Nested CSS Border Radius: Perfect Corner Curves

Creating visually harmonious interfaces requires precise alignment between nested elements, particularly when rounded corners are involved. In modern web development, applying the exact same border-radius to a parent container and its child creates an optical distortion known as concentric mismatch, where corners look awkward, uneven, or detached. Achieving perfectly balanced curves requires a deliberate mathematical relationship between the outer radius, the inner radius, and the distance separating them.

The Concentric Radius Formula

To maintain geometric harmony, the outer and inner curves must share the same focal point or center of curvature. When two rounded shapes share a center, the arc of the inner curve is offset by the distance between the two boundaries.

The universal calculation for concentric border radii is:

\[\text{Inner Radius} = \text{Outer Radius} - \text{Padding}\]

Conversely, if designing from the inside out:

\[\text{Outer Radius} = \text{Inner Radius} + \text{Padding}\]

If a parent element has a border-radius of 24px and an internal padding of 8px, the nested child must have a border-radius of 16px (24px - 8px). If the child also used 24px, the gap at the corners would visibly narrow, creating a pinched, distorted aesthetic.

Implementing Dynamic Radii with Modern CSS

Hardcoding these values can become brittle when layouts change. Modern CSS allows developers to automate concentric calculations using CSS Custom Properties (variables) and the calc() function.

.card {
  --card-padding: 16px;
  --card-radius: 28px;

  padding: var(--card-padding);
  border-radius: var(--card-radius);
}

.card-inner {
  border-radius: calc(var(--card-radius) - var(--card-padding));
}

Handling Edge Cases with max()

A critical edge case occurs when the padding is greater than or equal to the outer radius. If the calculation yields a negative number, standard CSS treats it as 0, but unexpected rendering can occasionally occur across different layout engines.

To ensure stability and enforce a completely square inner corner when padding exceeds the outer curve, wrap the calculation in a max() function:

.card-inner {
  border-radius: max(0px, calc(var(--card-radius) - var(--card-padding)));
}

Borders and Non-Uniform Padding

When an element also includes a border, the thickness of that border must be factored into the spacing offset. The formula expands to:

\[\text{Inner Radius} = \text{Outer Radius} - (\text{Padding} + \text{Border Width})\]

If asymmetric padding is used (such as different vertical and horizontal values), concentricity cannot be maintained with a single circular radius. In these situations, modern CSS allows elliptical radii by defining separate horizontal and vertical values:

.nested-element {
  border-radius: 
    calc(var(--outer-radius-x) - var(--padding-x)) / 
    calc(var(--outer-radius-y) - var(--padding-y));
}

Applying these geometric rules eliminates visual friction, mirrors the design standards of modern operating systems, and ensures that nested cards, tooltips, dialogs, and embedded media fit together with mathematical precision.