Concentric Border Radius

Using the same border radius on nested elements makes the inner corners look pinched. Calculate concentric radius using Outer Radius = Inner Radius + Padding.

Nested elements that share equal border radius values create visual friction. The space between the inner corner and outer border becomes uneven, making the inner surface look squeezed.

The Concentric Formula

To keep the gap between nested borders visually constant through curves, the outer radius must equal the inner radius plus padding:

Outer Radius = Inner Radius + Padding

For example, if your inner badge has a 12px border radius and sits inside a card with 16px padding, the card's outer radius must be 28px:

28px (Outer) = 12px (Inner) + 16px (Padding)

Use the sliders in the interactive preview above to tweak inner radius and padding values live, and feel how concentric alignment makes corners feel natural.