In CSS, you can set an element’s border to 0.5 pixels. How does that even work?

Question

In CSS, you can set an element’s border to 0.5 pixels. How does that even work?

In: 2

Answer 1

A CSS pixel is just 1/96 of an inch, and it doesn’t necessarily have any relation to screen pixels.

Many years ago, all computer monitors had approximately the same resolution. There were about 96 pixels per inch, horizontally and vertically. Everyone started making software based on that assumption.

These days, it’s really common for people to have displays with 300 – 500 ppi.

Rather than everyone changing their software, software still just lines things up based on 96 ppi, and then when it’s rendered on the screen they use 3 – 5 pixels for every 1 pixel in the layout.

So on many displays, 0.5 CSS pixels might be 2 – 3 actual screen pixels.

Also: a user can zoom into a web page, so 0.5 CSS pixels could turn into even more screen pixels.