The Case of the 0.5px Border: Why Your CSS Isn't Lying to You

One of the designs I had to implement recently had a slim border under the nav bar. The designer had asked for a 0.5px border.

Initially, I was skeptical. In my mind, a pixel holds one color—it's the atomic unit of a display. I wrote the code, checked it out in DevTools, and it gave me a 1px border. It felt odd to keep 0.5px in the codebase when the browser was clearly rounding it up.

A week later, the designer asked me about the "extra half pixel." I told him what had happened, but the guy insisted I keep it at 0.5px. I opened the code again, took a screenshot of how it looked to prove my point, and... surprisingly, DevTools said 0.5px this time.

What had changed? I realized I had moved the window from my 24-inch gaming monitor to my MacBook display.

A 0.5px border gave me a 0.5px border on the Mac, and a 1px border on the monitor. After a quick visit to StackOverflow and the W3C spec, it was clear: the decimal value is real, but your hardware decides if it cares.

The Secret: Device Pixel Ratio (DPR)

The reason for this "magic" is the difference between CSS Pixels and Physical Pixels. Back in the day, these were 1:1. But with Retina displays and high-DPI screens, manufacturers started packing more physical pixels into the same space.

This is defined by the formula:

$$\text{DPR} = \frac{\text{Physical Pixels}}{\text{CSS Pixels}}$$

• Standard Monitor (DPR 1): 1 CSS pixel = 1 physical pixel. The screen literally cannot light up "half" a pixel, so it rounds 0.5px up to 1px.
• High-DPI Display (DPR 2 or 3): 1 CSS pixel = 4 or 9 physical pixels. Here, 0.5px is equivalent to 1 or 1.5 actual physical pixels. The hardware finally has the resolution to render that thinner line.

What does the Spec say?

If you look at the W3C CSS Values and Units Module, it’s surprisingly chill about decimals. It defines the <length> type as a <number> followed by a unit. Since a <number> can be a float (like 0.5), 0.5px is perfectly valid CSS.

The spec doesn't mandate exactly how a browser should handle fractional pixels; it just suggests the browser should do its best to approximate the value using anti-aliasing (coloring a pixel at lower opacity to trick your eye into seeing a thinner line).

How much precision can you actually use?

You might wonder: if 0.5px works, will 0.0000001px work?

Technically, most modern browser engines (Blink, WebKit) treat CSS values as 32-bit floats. This gives you about 6 to 9 significant decimal digits of precision. This is why you’ll often see frameworks like Bootstrap use values like 16.666667%. Anything beyond 6 decimal places is usually lost to rounding errors before it even hits the rendering engine.

The Takeaway

Don't delete the decimal just because it looks "rounded" on your external monitor. If you’re building for mobile-first users or people on high-end laptops, that 0.5px border provides a "crisp," premium feel that a chunky 1px line can’t replicate.

Check your DPR before you argue with your designer. They might just be seeing something you aren't.