Skip to content
SOLICE
ΑΩ

Hairlines, and why a border is never one pixel

28 AUGUST 2026

On subpixel rendering, device pixel ratios, and getting a rule to look like a rule on every display you do not own.

A one-pixel border is a lie you tell the browser. What lands on the screen depends on the device pixel ratio, the compositor, and whether the element sits on a fractional offset.

The problem in one sentence

At dpr: 2, a 1px border is two physical pixels, which reads as heavy. At dpr: 1 on a fractional layout position, it gets antialiased across two rows and reads as grey.

What actually works

Use 0.5px and let the browser round up where it must. On the displays where it resolves, you get a genuine hairline; on the ones where it does not, you get the same 1px you would have specified anyway.

CSS · DESIGN

← ALL WRITING