Tip: Perfect nested border radius in CSS

CSS, Visual · Apr 3, 2022

Nesting elements with rounded borders can look very wrong if not done correctly. Luckily, there's a simple math trick to make it look right. All you need to do is calculate the border radius of one of the elements and the distance between them. The border radius of the outer element should be equal to the sum of the border radius of the inner element and the distance between the two elements. This can be mathematically expressed as innerRadius + distance = outerRadius or more tersely R1 + D = R2.

Nested border radius formula

Let's take a look at a simple CSS example. Say we want to style two nested boxes with rounded borders. The outer box has a border-radius of 24px and a padding of 8px. Using the previous formula, we can deduce that the inner box should have a border-radius of 16px.

.outer {
  border-radius: 24px;
  padding: 8px;
}

.inner {
  border-radius: 16px;
}

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub.

More like this

  • Tips & Tricks

    A collection of quick tips and tricks to level up your coding skills one step at a time.

    Collection · 56 snippets

  • Tip: Select any link with CSS

    You can use a CSS pseudo-class selector to style all links in a page, without worrying if they have been visited or not.

    CSS, Visual · Mar 6, 2022

  • CSS Reset

    A short, opinionated CSS reset to make your websites look great everywhere.

    CSS, Visual · Oct 16, 2022

  • How can I create a custom responsive favicon for dark mode?

    Learn how to create a custom responsive favicon that can adapt its color palette for dark mode with this quick guide.

    CSS, Visual · Sep 28, 2021