New Sep 12, 2024

Infinity in CSS

More Front-end Bloggers All from Frontend Masters Boost RSS Feed View Infinity in CSS on frontendmasters.com

Will Boyd covers how there is an infinity value baked into CSS. Never lose a z-index battle again, heh. I enjoyed little tidbits like how you can’t animate to infinity because…

… there are no incremental values on the way to infinity. A fraction of infinity is still infinity. So for every frame of the animation, the animated value is infinity.

I used one of Will’s ideas right after seeing it:

border-radius: calc(infinity * 1px);

This is when want that “pill shaped” button where the corners round as much as they can. You’d think 100% would work there, but that does something very different with border-radius (try it).

Sadfunny: using infinity broke the build on the project I used it on until I upgraded the version of PostCSS, which I hadn’t touched for a few years.

Scroll to top