Half of the pixels in the width of the border is not displayed

Question

Can I have half a pixel in the width of the border like this, I tried, but it does not work.

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

Answer 1

Theoretically, you cannot do this because a pixel is the smallest physical unit used to display material on your screen; however, you may want to do this for high-resolution devices such as Retina and others.

Answer 2

Most browsers will not display the pixel border of the image correctly.

It is better to use box-shadow for such cases. It can display fractional pixels.

 .one-pixel-border { box-shadow: -1px 0 0 #818181; } .half-pixel-border { box-shadow: -.5px 0 0 #818181; } .quater-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="quater-pixel-border"> quater pixel border </div> 

Answer 3

You can try to get a smaller border and then 1px using em.

But in any case, it will always be rounded to full pixels, because, as Jeremy said, this is the smallest display.

Answer 4

The reason border-width:0.5px doesn't work is because browsers do layout relative to (device-independent) pixels. Although physical pixels can be much smaller, so they can display elements smaller than a pixel, this does not affect the layout.

Since the css border property affects the layout, browsers will only use the width of an integer pixel. box-shadow only affects rendering, not layout, and therefore supports fractional units.

Answer 5

I think this is possible with the transform or translate options. For example:

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

pretend to be half-border Also check out the Priit Pirita article , which might be helpful :)