Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it wise to use fractional / decimal pixels for borders in css?

Tags:

css

pixel

border

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.

like image 998
someoneHere Avatar asked Oct 02 '15 07:10

someoneHere


People also ask

Can I use 0.5 px in CSS?

Pixel widths less than 1px are now possible on UHD screens (in modern browsers, at least).

Can you use fractions in CSS?

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.

Can I use decimals in CSS?

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.

Can you do half pixels in CSS?

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.


1 Answers

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

like image 200
zucker Avatar answered Sep 27 '22 20:09

zucker