Perfect Nested Rounded Corners

Put a rounded box inside another rounded box, give both the same border-radius, and something looks off. The space between them is even along the sides, but it swells in the corners. Change the radius and compare the two gaps.

The reason is that every rounded corner is a piece of a circle, and border-radius is that circle's radius. Two curves only stay the same distance apart when their circles share a center, like the rings of a tree. With the same radius, the inner circle is just as big as the outer one, but it starts further in, so its center is in the wrong place.

To move the inner center onto the outer one, the inner circle has to be smaller by exactly the space between the two edges. That space is the gap: the padding, plus the border if the outer box has one. So the inner radius is the outer radius minus the gap.

Push the padding past the outer radius and the result would be negative. A radius cannot be negative, so the inner corner becomes square. From there on, the corner gap is always a little wider than the sides. To fix that, make the outer radius bigger or the gap smaller.

In CSS, you can let the browser do the math. Keep the numbers in custom properties and calculate the inner radius from them. If a calc() result comes out negative, the browser already treats it as 0, but max() makes that clear to whoever reads the code.

.outer {
  --radius: 24px;
  --padding: 8px;
  --border: 1px;

  border: var(--border) solid #333;
  border-radius: var(--radius);
  padding: var(--padding);
}

.inner {
  border-radius: max(0px, var(--radius) - var(--padding) - var(--border));
}

Same center, same distance. Whenever you nest rounded shapes, like a card inside a card, a button inside a toolbar or an image inside a frame, subtract the gap from the outer radius, and the corners will follow each other.

@aykutkardas

—

0/50 claps