1px divider line looks thicker on some screens

Using a 1px border as a divider between sections. On my laptop it's crisp, on my phone and a client's monitor it looks like 2px and slightly blurry. Is there a CSS way to keep it a true hairline?
2

Leave A Reply

Log in to post an answer.

2 Answers

kate_81 Oct 30, 2026
maya_ppc
Check browser zoom and the OS display scaling too. At 125% Windows scaling (or 110% zoom) a 1px border works out to a fraction of a device pixel and gets rounded, so identical lines can look thicker in one place than another. If it only happens on one laptop, that's very likely the cause.
noahd Oct 09, 2026
maya_ppc
The blur is usually from the line landing on a half pixel, not the border itself. If the element's position works out to something like 312.5px (rem values, transforms, percentage heights), the browser smears it across two rows. Check for fractional positions above it. For a true hairline on high density screens, people use border-width 0.5px, or a 1px pseudo-element with transform scaleY(0.5). Support for 0.5px borders varies a bit, so test it on the phone that bothers you.