Nested border radius

Inner radius is outer radius minus the inset.

Layout4 minute read

Rounded corners look best when one curve follows the other. If a box sits inside another box, using the same radius on both makes the gap look wider near the corner.

It is one of those small things that makes an interface feel off without anyone being able to say why.

Wrong
16px / 16px outer inner
Right
28px / 16px outer inner

With a 12px inset, the outer radius should be 28px so both curves follow each other.

The fix is one relationship:

outer radius = inner radius + inset

The inset is the distance between the two edges, usually the parent’s padding. If the parent has a border, count its width too. Above, the inner radius is 16px and the inset is 12px, so the outer radius is 28px.

Start from the outer radius

Design systems usually set a radius on the outer component, so in practice you run the formula backwards:

inner radius = outer radius − inset

The inner radius cannot go below zero. If the inset is larger than the outer radius, the inner corner is simply square. In CSS, max() handles that limit for you.

In a real component

It is easier to see in a card than in an empty diagram. This card has a 16px outer radius and an 8px inset, so its media uses 8px.

The formula is a strong starting point, not a law. Tune it by eye when the inset changes around the component, when the inner element does not reach the corner, or when the two surfaces use different corner shapes.

The proper name for this is concentric corners: nested corners whose curves share a centre.

Sources

The math behind nesting rounded corners - Cloud Four’s explanation of the formula with practical CSS border-radius - MDN’s reference for the CSS property CSS corner shaping - The specification for outer, padding and content edge radii Craft, by Gustavo Fior - Where I first read this written down clearly