Concentric border radius

Put a rounded box inside a rounded box, give both the same radius, and it looks wrong in a way most people never locate. They nudge the padding, try another radius, give up, and ship it. The fix is one subtraction:

inner radius = outer radius − padding

A corner is an arc, and an arc has a centre. Subtracting the padding puts both arcs on the same centre, so the gap between them stays exactly the padding the whole way around the corner — the same gap the flat edges already have. Give the inner box the parent radius instead and the centres separate: along the 45° diagonal the gap opens to 1.41× the padding while the edges stay put. Nobody sees “1.41”; everybody sees loose.

In code

Written as a bare subtraction the rule produces negative radii, and a negative radius is not a tighter corner — it is nothing. Clamp it at zero, and derive the inner value from the outer one so there is a single number to change:

/* Wrong - the same radius on both */
.card { border-radius: 12px; padding: 8px; }
.card > * { border-radius: 12px; }

/* Right - the outer radius carries the padding */
.card { border-radius: 20px; padding: 8px; }
.card > * { border-radius: 12px; }

/* Right, and it cannot drift when the padding changes */
.card {
  --pad: 8px;
  --radius-outer: 20px;
  --radius-inner: max(0px, calc(var(--radius-outer) - var(--pad)));

  padding: var(--pad);
  border-radius: var(--radius-outer);
}
.card > * { border-radius: var(--radius-inner); }

Tailwind hides the arithmetic behind names, which is where the pairing usually breaks:

// Wrong - the same radius on both
<div className="rounded-xl p-2">
  <div className="rounded-xl">…</div>
</div>

// Right - 18px outer, 8px padding, 10px inner
<div className="rounded-2xl p-2">
  <div className="rounded-lg">…</div>
</div>

That pairing is arithmetic, not a convention. On this site rounded-2xl is 18px and rounded-lg is 10px, so p-2 lands exactly; move the radius scale and the class that fits moves with it. Copy the numbers, not the class names.

Where the rule stops paying

The clamp is a floor, not a rescue. When the padding is much larger than the radius, no inner radius makes the corner concentric — square is merely the closest available answer. At an outer radius of 14px with 24px of padding, a square inner corner still leaves a diagonal gap of 28.1px against 24px at the edges.

The compensation is that nobody is looking. Concentricity is a claim about two arcs sharing a centre, and the further apart they sit, the less the eye reads them as one shape at all. Past roughly 24px of padding, treat the layers as separate surfaces and choose each radius on its own merits.

This site's own flashcard sits on that side of the line and stays as it is: rounded-xl chrome (14px) with p-6 (24px), and grade buttons carrying that same 14px. Forcing them square would obey the formula and look worse.