Half pixel in border width size it is not showing

Question

can i have half pixel in border width like this , I tried it but it is not working

  element.style {
    border-left-width: 0.5px;
    border-color: #818181;
    border-left-style: solid;
   }

Answer 1

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>

Answer 2

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 :)