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?