Nothing outs a rushed interface faster than corners: a 4px-radius button inside an 16px-radius card inside a 12px-radius modal, each rounded by whoever touched the file last. Users cannot articulate the problem—they just sense the interface was assembled, not designed.

The nesting law

The rule professionals apply and amateurs miss: nested radii are not equal—they are concentric. An inner element’s radius should equal the outer radius minus the gap between them. Equal radii on nested boxes make the inner corner look bloated and the margin visually uneven.

/* outer radius = inner radius + padding */
.card {
  --pad: 16px;
  --r-inner: 8px;
  padding: var(--pad);
  border-radius: calc(var(--r-inner) + var(--pad));
}
.card img { border-radius: var(--r-inner); }

Encode that as a calc and nesting becomes self-correcting: change the padding and the corners stay concentric—the geometry a thumbnail sitting inside a card visually expects.

“Corners are where boxes meet. If they disagree, the whole layout is having an argument.”

A scale, not a vibe

Like spacing, radius wants a token scale, and a short one: something like 4 / 8 / 12 / 20 / full. Small elements (inputs, tags) at the bottom, cards in the middle, pills and avatars at the top. Radius also carries voice—2px reads as enterprise, 8px as friendly product, 20px as consumer playful—so pick the register once and hold it everywhere. When every corner agrees, nobody notices; that is the point.