Thin line border-CSS examples

Provides a border for the element, with a width equal to 1 local device pixel, which can be very sharp and clear.

HTML CODE:

<div class="hairline-border">
    text with a thin border around it.
</div>

CSS CODE:

.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;
    }
}

Description

1. box-shadow , when using only extensions, add a fake border that can use subpixels*.
2. Use @media (min-resolution: ...) To check the device pixel ratio ( 1dppx equal to 96 DPI), set box-shadow the distribution to 1 / dppx. .