1pX

1px is a unit commonly used in web development and digital graphics to denote a single CSS pixel. A CSS pixel is an abstract unit used for layout and styling, not a fixed device pixel. The relationship between CSS pixels and device pixels depends on the devicePixelRatio: on high-DPI screens, one CSS pixel can map to multiple device pixels, allowing interfaces to scale consistently across devices while preserving layout geometry.

In practice, 1px is most often used to draw borders, dividers, and hairline accents. The style border: 1px solid #ccc is a typical example. Some modern browsers support subpixel values such as 0.5px to create hairlines on high-density screens, but rendering can vary by browser, zoom level, and device, so the resulting thickness may appear as a single device-pixel line or be blurred.

When designing with 1px lines, developers consider accessibility and legibility. Very thin lines can become difficult to discern at small sizes or on low-contrast backgrounds, and thickness can appear inconsistent across devices with different DPIs or zoom settings.

Alternatives and techniques include using scalable thickness with rems or using media queries to adjust line thickness at different screen densities. Some design systems also employ outline properties or vector strokes to maintain crispness without affecting layout measurements.