In CSS, Some Infinities Go Beyond

That’s not Buzz. It’s Boris. Boris is AI generated.

You’re probably familiar with CSS units such as px, rem, em, and maybe even more exotic units like dvh, deg or kHz, but there is another value that (as of April 5, 2024) isn’t even listed on MDN’s CSS Values and Units, and that is infinity.

I’m going to burst your bubble right now though, and tell you that infinity is not actually infinite. Depending on your browser, when infinity is used on the width, it’s either 16,777,216px (Chrome), 17,895,698px (Firefox*), 26,843,546 (Edge) and 33,554,432 (Safari).

To put those pixels into real world context, it ranges from about 4.44km to 8.88km. It’s weird to think about screen size elements in kilometre widths.

Boris, don’t measure with that. There is something wrong with that ruler. Hint: It’s AI generated.

(This value changes when using z-index, where it caps out at 2,147,483,647, or the highest number an integer can be on a computer.)

It should also be noted that infinity cannot be used by itself. It needs to be added in a calc() function with a unit, such as calc(infinity * 1px) . This is different for z-index as z-index is unit-less, eg: z-index: 10.

With that said, the next logical test would be to see if we can multiply infinity by a larger value, like 10px, or a…