Menu
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;
}
983
0.5px is valid and it works.
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.
Yes, you can specify fractional pixels.
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.
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>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 :)
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
