Concentric corners

A good default lets someone finish the task without studying the settings. The page opens, the text reads, the link can be shared. That is most of the work.

Everything else is a choice you are handing over. Offer it only when a need shows up, and leave the rest to the people who already know they need it.

One rule instead of a setting

Nested corners are the small version of this. Put a rounded panel inside another one with a little padding between them and give both the same radius, and something feels off: the inner corners look too sharp, and the gap bulges at each corner.

A corner radius describes a circle. Two arcs with the same radius but different centres drift apart by roughly 0.41 × radius at the corner. One line fixes it: the outer radius is the inner one plus the padding. A 12px panel in a 4px 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>

When to offer a choice

The rule holds for shapes your eye compares directly. Past about 24px of padding the layers stop reading as one object, and each keeps the radius it would have on its own.

A default is a decision you make once, so someone else doesn't have to.

If you have a counterexample, write to me.