30 seconds of CSS

  Back to Home

Hairline border  visual

Gives an element a border equal to 1 native device pixel in width, which can look very sharp and crisp.

HTML
<div class="hairline-border">text</div>
CSS
.hairline-border {
  box-shadow: 0 0 0 1px;
}

@media (min-resolution: 2dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.5px;
  }
}

@media (min-resolution: 3dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.33333333px;
  }
}

@media (min-resolution: 4dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.25px;
  }
}
Demo
text
Explanation
  1. box-shadow, when only using spread, adds a pseudo-border which can use subpixels*.
  2. Use @media (min-resolution: ...) to check the device pixel ratio (1dppx equals 96 DPI), setting the spread of the box-shadow equal to 1 / dppx.
Browser support

100.0%

⚠️ Needs alternate syntax and JavaScript user agent checking for full support.


*Chrome does not support subpixel values on border. Safari does not support subpixel values on box-shadow. Firefox supports subpixel values on both.