Half pixel in border width size it is not showing

Theorically speaking, you can't do that because the pixel is the smallest physical unit used to display stuff on your screen ; however, you could want to do that for high resolution devices, like Retina and others.


I think that is achievable by either transform or translate options here. For example this:

border-bottom: 1px #ff0000 solid;
transform: scaleY(0.5);

will render a sort of a half-size border. Also check the article by Priit Pirita which might be useful :)


Most of browsers will not display fraction pixel borders correctly.

It's better to use box-shadow for such cases. It can display fractions of pixels.

.one-pixel-border {  
    box-shadow: -1px 0 0 #818181;
}

.half-pixel-border {  
    box-shadow: -.5px 0 0 #818181;
}

.quarter-pixel-border {
    box-shadow: -.25px 0 0 #818181;
}
<div class="one-pixel-border">
  one pixel border
</div>
<div class="half-pixel-border">
  half pixel border
</div>
<div class="quarter-pixel-border">
  quarter pixel border
</div>

Tags:

Css