In CSS, you can set an element’s border to 0.5 pixels. How does that even work?
In: 2
A pixel is a square. It can be split in half diagonally. Look at something on a computer screen and zoom in to about 600% to see for yourself.
Interpolation. If the border is #000 and the pixel where half of the border is supposed to be is #fff, the pixel color will be in between both.
Also there’s a lot of devices that have more dense displays (phones, tablets, higher end laptops…) and don’t map pixels 1:1.
A pixel is a square. It can be split in half diagonally. Look at something on a computer screen and zoom in to about 600% to see for yourself.
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.
Interpolation. If the border is #000 and the pixel where half of the border is supposed to be is #fff, the pixel color will be in between both.
Also there’s a lot of devices that have more dense displays (phones, tablets, higher end laptops…) and don’t map pixels 1: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.
Latest Answers