Tip: Perfect nested border radius in CSS – 30 seconds of code


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;

Would you like to help us improve 30 seconds of code?Take a quick survey

Recommended snippets

  • Creates a custom list counter that accounts for nested list elements.

  • Applies styles to an element when in fullscreen mode.

  • Hides scrollbars on an element, while still allowing it to be scrollable.





Source link

Leave a Reply

Your email address will not be published.

Previous Article

Musicians turn to NFTs in hunt for fresh profits

Next Article

A Recipe for the Perfect Software Delivery Storm: Part 1 - SitePen

Related Posts