Concentric Radius: Nested Corners Done Right

If you’ve ever nested a rounded element inside another rounded element and felt like something was slightly off, you’re not imagining it. The gap between the two shapes looks uneven, thicker in some places and thinner in others, even though the padding is technically identical on all sides.

The fix is concentric radius, and once you understand it, you’ll never unsee the problem again.

What Is Concentric Radius?

When you have two nested rounded rectangles, for example, a card with a rounded image inside it, the natural instinct is to give both the same border-radius. A 16px radius on the card, a 16px radius on the image. They match, right?

They don’t. When the inner and outer shapes share the same radius value, their curves don’t follow the same arc. The corners of the inner element appear to bulge outward relative to the outer element, creating an uneven visual gap. The spacing between the two shapes looks wider at the corners than along the straight edges, even though the padding is uniform.

Concentric radius is the principle of adjusting the inner element’s corner radius so that both curves appear to share the same centre point, like concentric circles. When you get it right, the gap between the two shapes looks perfectly even all the way around, and the nested elements feel like they belong together as a single, cohesive surface.

The Formula

The math is simple:

Inner radius = Outer radius − Outer Padding

or:

Outer radius = Inner radius + Outer Padding

So if your outer card has a border-radius of 24px and a padding of 8px, the inner element should have a border-radius of 16px. That’s it.

Working the other way is just as easy: if you know your inner radius and your padding, the outer radius is just the sum of the two. An inner radius of 12px with 8px of padding means the outer should be 20px.

If the formula results in 0 or a negative number (because the padding is larger than the outer radius), the inner element should simply have square corners. There’s nothing to round, the curve has been fully consumed by the spacing.

Why It Matters

This is one of those details that most people can’t articulate but everyone can feel. When the radii don’t match concentrically, the interface looks slightly cheap or careless, like something generated by default rather than intentionally designed. When they do match, everything feels tight and polished.

Apple has taken this principle seriously for years. Their hardware and software both exhibit concentric radius everywhere, from the iPhone’s screen corners nesting inside the device’s body corners, to the way iOS app icons sit within rounded containers. At WWDC 2025, they even introduced a ConcentricRectangle API in SwiftUI that calculates inner radii automatically, which tells you how fundamental they consider this to be.

You’ll see it in every well-designed card component, every modal with rounded internal content, every button inside a rounded toolbar. And you’ll feel its absence in every interface that doesn’t bother.

How to Do It in CSS

The outside in way

The most straightforward approach is to calculate the inner radius yourself using CSS custom properties and calc():

:root {
	--radius: 24px;
}

.card {
  --padding: 8px;

  border-radius: var(--radius);
  padding: var(--padding);
}

.card__inner {
  border-radius: calc(var(--radius) - var(--padding));
}

:root {
	--radius: 24px;
}

.card {
  --padding: 8px;

  border-radius: var(--radius);
  padding: var(--padding);
}

.card__inner {
  border-radius: calc(var(--radius) - var(--padding));
}

In this example we set a common border-radius to use on all our rounded elements. This helps to keep things consistent. (as we love) And then we can use calc to calculate the inner radius, subtracting the padding from the outer radius.

Automatic CSS, the framework I use on all my wordpress projects, makes this super easy, since already comes with a var(–radius) value that we can tweak and use everywhere.

For me tho, it makes the most sense to do it the other way around, inside out. The most inner elements always use your base radius, and the outer ones keep adding up. This way, you’ll never have a squared item if you don’t want to. For me, if a website has radius everywhere, it should have radius everywhere.

The inside out way (my favourite)

In this case, instead of subtracting the padding from the outer radius, we do the opposite, we add the padding to the inner radius.

:root {
	--radius: 24px;
}

.card {
  --padding: 8px;

  border-radius: calc(var(--radius) + var(--padding));
  padding: var(--padding);
}

.card__inner {
  border-radius: var(--radius);
}

:root {
	--radius: 24px;
}

.card {
  --padding: 8px;

  border-radius: calc(var(--radius) + var(--padding));
  padding: var(--padding);
}

.card__inner {
  border-radius: var(--radius);
}

PS: This will work even with squircle border radius. More on squircles in this blog article.

Wrapping Up

Concentric radius is one of those things that takes about thirty seconds to learn and pays off in every design you make afterwards. The formula is dead simple, inner radius equals outer radius minus the padding, or, outer radius equals inner radius plus the padding, and CSS custom properties with calc() make it painless to implement.

The next time you nest a rounded element inside another rounded element, take the extra ten seconds to do the math. Your corners will thank you.