Nested border-radius Playground

Mads Stoumann - Aug 27 '21 - - Dev Community

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()?

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player