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)
better add the #css tag instead of the #codepen otherwise many CSS users will miss it.
Good point! Thanks!
Why won’t you ever use it?
I’m using two nested border-radii in a component I’m currently working on — but maybe I’ll use six radii one day 😁