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:
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