Member-only story

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

Jitendra Kumar
Bootcamp
Published in
4 min readOct 15, 2024

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?

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Bootcamp
Bootcamp

Published in Bootcamp

From idea to product, one lesson at a time. To submit your story: https://tinyurl.com/bootspub1

Jitendra Kumar
Jitendra Kumar

Written by Jitendra Kumar

Turning Confusion Into Clarity, One Pixel At A Time! Self-Made Designer | jitkrgupta.com

No responses yet

What are your thoughts?