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