Design Tool — Free & Open
Better Corners.
bettercorners.io — because math matters

Every nested rounded rectangle has a mathematically correct inner radius. Most designers guess it. Most tools ignore it. One formula fixes everything.

Open Calculator
r_outer = 60px  |  gap = 20px  |  r_inner = 40px

One rule.
Perfect harmony.

When you nest two rounded rectangles, the inner border-radius is not the same as the outer — and it’s not zero either. The centers of both arcs must align on the same axis.

The gap between the two elements is exactly the distance between the arc centers. Subtract it from the outer radius and you get a perfectly concentric, visually harmonious corner. Every time.

This is also the principle behind Apple’s Squircle system — they just never documented it.

r_inner = r_outer − gap
r_innerThe border-radius of the inner element. This is what you’re solving for.
r_outerThe border-radius of the outer container — the number you already have.
gapThe distance between outer and inner element. Usually padding or border-width.

The Calculator

Adjust — copy — ship.

Dimensions
Colors
Result
r_outer 80px
gap 20px
――――――
r_inner 60px
✓ Harmonious
✓ Correct
r − gap
✗ Same radius
r = r_outer
✗ No radius
r = 0
Why it matters
Three approaches.
One correct.
✓ Correct
r_outer − gap
Arc centers align on the same axis. Corner curvature flows continuously from outer to inner. Intentional, professional, harmonious.
border-radius: calc(32px - 16px)
✗ Wrong
Same radius
The inner element curves more aggressively than the outer. Creates a pinched, inconsistent corner. Looks like a mistake — because it is.
border-radius: 32px /* same */
✗ Wrong
Zero radius
Sharp corners inside soft corners. Jarring, no visual connection between elements. Breaks the spatial logic entirely.
border-radius: 0