Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Half pixel in border width size it is not showing

Tags:

css

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;
   }
like image 983
KJA Avatar asked Nov 21 '13 08:11

KJA


People also ask

Can I use 0.5 PX in CSS?

0.5px is valid and it works.

How do you display border width?

The syntax for the CSS border-width property (with 2 values) is: border-width: top_bottom left_right; When two values are provided, the first value will apply to the top and bottom of the box. The second value will apply to the left and right sides of the box.

Can you have half a pixel?

Yes, you can specify fractional pixels.

How do you change the width of a border?

Right-click over the cells you've chosen and select Format Cells and, in the popup window, click the Border tab. For a continuous line, choose one of the thicker styles from the Line box. In the Presets section, click your existing border type. Check your new border width in the preview diagram.


2 Answers

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>
like image 197
ujeenator Avatar answered Sep 27 '22 20:09

ujeenator


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

like image 42
boldnik Avatar answered Sep 27 '22 21:09

boldnik