Entry 04

Concentric nested radius

Use it wherever a rounded element sits inside a padded rounded parent, such as an image in a card or a button in an input.

Open

In every corner the two curves run parallel, at any padding.

Code CSS · 8 lines

.card {
  --radius: 0.75rem;
  --pad: 0.5rem;
  padding: var(--pad);
  border-radius: calc(var(--radius) + var(--pad));
}

.card > * { border-radius: var(--radius); }

Why it works, the rules and the credits 1 reason · 1 rule · support · credits

Why it works

Two curves look parallel only when they share a center. That means outer radius = inner radius + gap. Equal radii make the corner band look pinched.

Rules

Derive the outer radius from the inner one. The other way round reaches zero once the padding exceeds the radius.

Support

Every browser.

Credits

Borrowed from: Chris Coyier, The Classic Border Radius Advice, Plus an Unusual Trick, 2024-05-13, which quotes Jhey Tompkins's version