DEV Community

Cover image for Nested border-radius Playground
Mads Stoumann
Mads Stoumann

Posted on

Nested border-radius Playground

When nesting elements with a border-radius, I found this formula, which I implemented in the Codepen below:


Each “inner ring” multiplies the --gap, and deducts it from the border-radius: --bdrs:

calc(var(--bdrs) - (var(--gap) * 1)) etc.

It looks fine with larger border-radii, but when the gap increases, and you use smaller radii, you'll end up with negative radii (thus, not visible) in those inner rings, where the multiplied --gap ends up being larger than the radii.

I'll never use this irl, but – just out of curiosity – does anyone have a better formula, that'll work with infinite inner radii? Or maybe use something like clamp()?

Top comments (4)

Collapse
 
afif profile image
Temani Afif

better add the #css tag instead of the #codepen otherwise many CSS users will miss it.

Collapse
 
madsstoumann profile image
Mads Stoumann

Good point! Thanks!

Collapse
 
jonlauridsen profile image
Jon Lauridsen

Why won’t you ever use it?

Collapse
 
madsstoumann profile image
Mads Stoumann

I’m using two nested border-radii in a component I’m currently working on — but maybe I’ll use six radii one day 😁