This content originally appeared on DEV Community and was authored by Mads Stoumann
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()?
This content originally appeared on DEV Community and was authored by Mads Stoumann
Mads Stoumann | Sciencx (2021-08-27T07:01:44+00:00) Nested border-radius Playground. Retrieved from https://www.scien.cx/2021/08/27/nested-border-radius-playground/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.