Concentric corners, and other things your eye notices first

Put a rounded card inside another rounded card with a little padding between them, give both the same radius, and something feels off. Most people can't say what. The inner corners look too sharp next to the outer ones, and the gap between them bulges at each corner.

The rule

When two surfaces share an even inset, the outer radius should equal the inner radius plus the padding between them. Add the border width too, if there is one. That keeps the gap the same thickness all the way around the curve.

Outer radius = inner radius + padding.

Why equal radii look wrong

A corner radius describes a circle. If both corners use the same circle but one sits inset from the other, the two arcs don't share a centre. At the straight edges the gap is your padding; at the corner it's wider, by roughly 0.41 × radius. Your eye reads that as the inner shape shrinking away from its frame.

• The effect is strongest on small, tight insets like segmented controls and chips.
• It nearly disappears once the padding passes about 24px.
• Dark mode makes it more visible, because shadows give way to hairline rings.

Writing it in Tailwind

With a radius scale, pick the inner token first and walk up the scale by the padding. Here a 12px panel sits in a 4px frame, so the frame takes 16px.

<div className="frame-3xl frame-p-1">    {/* 16px, 4px in */}
  <div className="rounded-inner p-4">    {/* 16 − 4 = 12px */}
    <img className="rounded-lg" />      {/* separate surface: own token */}
  </div>
</div>

The image in the middle is not part of the chain. Its padding is 16px, which would leave it a radius of only 4px; at that distance it reads as its own surface, so it keeps its own token.

When to stop

The rule is about shapes your eye compares directly. Past roughly 24px of padding, or with deliberately uneven insets, the layers stop reading as one object and each should keep the radius it would have on its own.

A short checklist

1. Find every padded parent whose child has the same radius.
2. Add the padding (and border) to the parent.
3. If the result is larger than your biggest token, the layers are separate surfaces anyway.

Thanks to Leo Park and Yuki Tanaka for reading drafts of this. If you have a counterexample, I'd love to see it: write to me.