Nested border radius

The nested border-radius rule says an inner corner's radius should equal the outer radius minus the padding between them.

Why it matters

Equal radii inside and out make the inner corner look pinched. Subtracting the padding keeps both curves parallel.

In practice

  • Outer 32, padding 16, inner 16.
  • Subtract borders too.
  • Store radius tokens in outer and inner pairs.

The UI sizing guideAll 42 terms

Related terms

Touch targets

A touch target is the tappable area of a button, link or control.

Learn the term

Button sizes

Button sizes are a small, fixed set of heights and paddings, often 32, 44 and 52 pixels tall, used across a whole interface.

Learn the term

Mobile-first design

Mobile-first design starts with the phone screen and adds to it for larger screens, instead of squeezing a desktop page down.

Learn the term

Want this done for you?

Nested border radius is part of a normal project here. Tell me where you are and I'll suggest the first three fixes.

Book a 20-minute call