Nested CSS Borders: A hidden puzzle

Nested CSS Borders: A hidden puzzle

Realm Coding

2 min read

Hey there โœŒ๐Ÿผ

In this article, we'll tackle a common CSS issue that can be a bit puzzling.

Imagine you're sitting on your desk, working on the frontend of your million-dollar idea application. You have a main outer container with smaller box elements inside it.

my image saved on sudorealm.com

To make them look good, you've decided to round the corners of the outer container. In this example letโ€™s say you decide for the outside container to have 50px of border radius and a padding of 20px with the inside elements.

my image saved on sudorealm.com

And of course you want everything to match, so you've given the smaller boxes the same rounded corners.

my image saved on sudorealm.com

But wait a minuteโ€ฆ

Something is off isn't it?

When you apply the same border radius to both the outer and inner elements, you might expect them to seamlessly nestle together, sharing the same rounded edges. However, that's not the case.

The inner elements inherit the border radius from the outer container, but they also inherit the padding. This means that the inner elements will have their rounded corners start from the edge of their content box, which includes the padding space. As a result, the corners of the inner elements might appear to stick out beyond the edges of the outer container.

To resolve this issue and restore peace inside your application you'd need to perform a simple calculation:

// The Calculation
Inner Border Radius = Outer Border Radius - Padding

// So in our case
Inner Border Radius = 50px - 20px = 30px

Of course you can apply the same principle with more than pixels, using other units.

Let's see the result with our new border radius values:

my image saved on sudorealm.com

Let's also examine the case we only have one element inside. This will help you understand more the difference about what we're talking about.

On the left we have the same border radius values for both the outside and inside element (30px) and on the right we have the correct values that we got from our calculation.

my image saved on sudorealm.com

That's it for today, thanks for taking the time to read ๐Ÿ™๐Ÿผ

Affiliate Links

Check out what Teo suggests for Nested CSS Borders: A hidden puzzle!

    No affiliates available for this post!

Ready to Forge an Alliance
๐Ÿค

Join our alliance and play a pivotal role in the evolution of our digital realm! By aligning with our pricing model, you're not just accessing premium features; you're becoming an integral part of our journey. As an ally, your support propels us forward, ensuring we continue to innovate and thrive.

Lifetime membership

As valued allies, exclusive content awaits you ๐Ÿ‘€. Unlock a suite of premium features and gain early access to ally-only enhancements in our realm. With our month-by-month commitment, you're always privy to our most coveted updates!

What's included

  • Premium Content Access
  • Ally resources + Unique Ally Badge
  • Access to Affiliate store front ๐Ÿค‘ (๐Ÿ”ฎ)
  • More to come...

It's like buying a pint ๐Ÿบ. But less!

โ‚ฌ1.99 EUR

Forge Alliance

Invoices and receipts available for easy company reimbursement

Subscribe to our newsletter.

๐Ÿ‘‹ Hey there, Realmer! Fancy getting a byte of nerdy knowledge straight to your inbox? Subscribe to our Sudorealm newsletter and don't miss a single trick from our growing community of curious minds! Ready to level up your knowledge game? Join us in the Realm today!

Be one of the privileged few
Think of it as your VIP pass into the Realm where you'll get first dibs on new features, insider updates, and more.
No spam
And, worry not, we promise not to spam โ€“ just top-tier, brain-tickling content.