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

Question

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.

Aeniah

I'm not sure how your designer is visualising the 1.5px. I mean, of course the value is rounded to whole pixels. Unless you have a high-resolution device like a phone or a printer. But those edge-cases aside... oh, wait. – Allegory

It will be rounded to an integer number of pixels always... – Milomilon

@MrLister, Sarcasm? You're saying it should work because those are not 'edge cases' ? – Aeniah

Seriously now, if this is meant for something to be printed, CSS units like pt would probably be better. – Allegory

Not meant for print. Just for display in browser. – Aeniah

OK. In that case, there's no such thing as half a pixel. Fractional pixels will be rounded, end of story. Please note, however, that some browsers will try to keep things lined up with some properties. In this fiddle where I've given the paragraphs a margin of 1.25px, most margins will be 1 pixel, but one in every four margins will be 2 pixels! – Allegory

Thanks. Is there another value I could use? Pt , em, etc? Use css transform / scale? – Aeniah

I suggest you dont, since this can sometimes invoke weird behavior. stackoverflow.com/questions/47603304 – Neomineomycin

Answer 1

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

Mitman

Is there another value I could use? Pt , em, etc? Use css transform / scale? – Aeniah

@Aeniah Yes, you can use decimal value with percent, pt, em. But sometimes it can works inconsistently for different browsers. – Mitman