When a rounded element sits inside another rounded element, the two curves should run parallel, with the same gap all the way round the corner. If the inner radius is too big or too small, the gap pinches at the corners and the whole thing looks slightly wrong, even if nobody can say why.
The rule
Inner radius = outer radius - padding. Both curves share the same center, which is what keeps the gap even. A card with a 24 px radius and 8 px of padding holds a child with a 16 px radius. With 16 px of padding the child gets 8. The bigger the padding, the smaller the inner radius.
When the padding is as big as the radius
If the padding is equal to or bigger than the outer radius, the subtraction is zero or negative. The inner corners should be square (0): there is no curve left to follow, and a rounded inner corner would look like a different shape floating in the card.
The mistakes to avoid
- The same radius on both: the gap is thick at the corners and thin on the sides, and the card looks bloated.
- A smaller inner radius than the rule: the inner corner looks pointy against its frame.
- Forgetting borders: a 1 px border counts as padding, so subtract it too.
- Mixing radius sizes by feel: pick two or three radii for the system and derive the rest.
In CSS
.card {
--radius: 24px;
--padding: 8px;
padding: var(--padding);
border-radius: var(--radius);
}
.card > .inner {
border-radius: max(0px, calc(var(--radius) - var(--padding)));
}Keeping the radius and the padding in custom properties means the inner radius updates itself when either one changes.
In Figma
Set the corner radius on the inner frame to the outer radius minus the padding. If you use variables, make a radius variable per level (for example radius-card 24 and radius-inner 16) so a change to the card carries through. A frame with Clip content on also clips its children to its own corners.
Practice
Radius Match shows six cards with a box inside a box. Slide the inner radius until the gap looks even, then see the subtraction behind the answer.