I have various instances in my design that call for
border-right: 1.5px solid black;
border-bottom: 1.5px solid black;
etc...
I also have design that needs thinner lines: at 1px
.
However, it seems the browser may round the decimal, as I'm not seeing much differentiation between the two (if any).
Should I just be using 2px
and 1px
instead, or is there a better way to pull this off?
A designer I'm helping is very adamant about the 1.5px
line width.
Any help, much appreciated.
Pixel widths less than 1px are now possible on UHD screens (in modern browsers, at least).
Yes, you can specify fractional pixels. As this has been part of CSS since the very first version, it should be well supported by any browser that supports CSS at all.
Although you can use decimal places in CSS like 100.0% in reality it best to keep to real numbers for percentages and only upto one decimal place with standard linear integer values.
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.
You can use it, but most browsers will round pixel value.
http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#values
http://ejohn.org/blog/sub-pixel-problems-in-css
http://cruft.io/posts/percentage-calculations-in-ie/
EDIT: Remember that one CSS pixel is not always equal to one physical screen pixel: A pixel is not a pixel is not a pixel
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