2px

2px is a length commonly used in digital design to denote a thickness or distance equal to two CSS pixels. In CSS, the px unit represents a CSS pixel, an abstract unit that is scaled by the browser according to the device’s pixel ratio. On standard displays with a device pixel ratio near 1, 2px corresponds to two hardware pixels; on high-DPI displays, the same CSS length can map to more than two physical pixels. Because the mapping depends on the device and zoom level, the actual visual thickness of a 2px line can vary across screens.

In practice, 2px is widely used for borders, outlines, and strokes in vector graphics and user interfaces. It provides a mid-range thickness that is more noticeable than a hairline yet less dominant than thicker borders. In SVG and canvas, a stroke width of 2px yields a line drawn with that thickness in the current device pixel grid. Designers may choose 2px to separate sections, emphasize elements, or convey a subtle, structured look.

Considerations include the effect of display density, zoom, and accessibility. On small screens or for users with low-contrast needs, a 2px border can impact readability if color contrast is insufficient. Responsive designs may adjust border thickness or switch to alternative styling at different breakpoints.

See also: CSS pixel, device pixel ratio, stroke-width, border-width, high-DPI displays.