Search
View Details

Infinity in CSS

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);Code language: CSS (css)

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.

Wanna learn CSS from a course?

Frontend Masters logo

FYI, we have a full CSS learning path with multiple courses depending on how you want to approach it.

Leave a Reply

Your email address will not be published. Required fields are marked *

Frontend Masters ❤️ Open Source

Did you know? Frontend Masters Donates to open source projects. $313,806 contributed to date.