Getting Your Border Radius Right: A Simple Trick for Smooth Nested Containers

Why Border Radius Matters (and Gets Messy)

Rounded corners can make any design feel friendly and polished, but when you’re dealing with multiple nested containers, things can start looking a little… off. If you don’t adjust the radius as you go deeper, you’ll either end up with awkward, clipped corners or zero rounding at all.

Let’s dive into a simple trick to keep your corners looking smooth and consistent, no matter how many layers you’re working with.

The Formula: Outer Radius = Inner Radius + Padding

This is the basic formula to keep your rounded corners looking even:

• Start with an inner radius (the smallest corner inside your design).
• Then, add padding to that radius to determine the outer corner’s radius.

For example, if your inner container has a 16px radius and you want 8px of padding, set the outer container’s radius to 16px + 8px = 24px. Easy, right?

This formula keeps each layer of corners aligned, giving you a nice, smooth look. But what happens when you add more layers?

Nested Containers: Why You Can’t Always Stick to the Formula

So, let’s say you want to create a card with a few layers:

1. First container: Radius = 24px, Padding = 8px
2. Second container (inside the first one): Radius = 24px—8px = 16px
3. Third container (inside the second one): Radius = 16px—8px = 8px
4. Fourth container (inside the third one): Radius = 8px—8px = 0px

Uh-oh. By the time you get to the innermost layer, you’ve got sharp corners. Not exactly the smooth look you were going for, right?

So, How Do You Fix This?

Instead of applying the full padding reduction every time, try reducing it proportionally. Here’s what I mean: