Horizontal line of 1px is not perfectly straight

A 1px horizontal line that looks not perfectly straight is a surprisingly common issue in web design and screen rendering. Although it seems simple, several factors can cause thin lines to appear blurry, uneven, or "jagged" on different devices or browsers.

Why does this happen?

1. Subpixel rendering and anti-aliasing: Modern screens and browsers try to smooth edges by blending colors, especially on thin lines. This can cause a 1px line to appear fuzzy or not perfectly sharp.
   
2. Device pixel ratio (DPR): On high-DPI (Retina) displays, a CSS 1px line might actually translate to less than one physical pixel, causing the browser to scale or blur the line.
   
3. Line positioning: If a line is positioned on a half-pixel or subpixel value (e.g., 10.5px), the browser will render it in between pixels, causing blurriness.
   
4. Zoom level and scaling: Browser zoom or page scaling can also distort thin lines.
   

How to fix or improve the appearance?

1. Use whole pixel values: Position your lines on whole pixel boundaries to avoid subpixel blurring. For example, use top: 10px instead of top: 10.5px.
   
2. Use CSS transform or translateZ(0): Sometimes forcing hardware acceleration helps the browser render crisp lines.
   
3. Try border instead of hr or div: Sometimes using a border with border-top: 1px solid #000; on a container renders better.
   
4. Consider using SVG or canvas: For perfect control over line rendering, SVG or canvas graphics avoid some of the browser’s layout quirks.
   

Final thoughts:

Rendering a perfectly straight 1px horizontal line isn’t always as straightforward as it seems because of how browsers and devices handle pixels and scaling. Being mindful of positioning and using alternative techniques can help make your lines look crisp and clean across all screens.