10

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.

zucker
  • 1,066
  • 12
  • 26
someoneHere
  • 323
  • 1
  • 3
  • 15
  • 2
    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. – Mr Lister Oct 02 '15 at 07:09
  • It will be rounded to an integer number of pixels always... – Fahad Khan Oct 02 '15 at 07:10
  • @MrLister, Sarcasm? You're saying it should work because those are not 'edge cases' ? – someoneHere Oct 02 '15 at 07:14
  • Seriously now, if this is meant for something to be printed, CSS units like `pt` would probably be better. – Mr Lister Oct 02 '15 at 07:15
  • Not meant for print. Just for display in browser. – someoneHere Oct 02 '15 at 07:16
  • 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](http://jsfiddle.net/MrLister/3rm507mv/1/) 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! – Mr Lister Oct 02 '15 at 07:25
  • Thanks. Is there another value I could use? Pt , em, etc? Use css transform / scale? – someoneHere Oct 02 '15 at 07:45
  • I suggest you dont, since this can sometimes invoke weird behavior. https://stackoverflow.com/questions/47603304 – phil294 Dec 02 '17 at 03:48

1 Answers1

7

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

zucker
  • 1,066
  • 12
  • 26
  • Is there another value I could use? Pt , em, etc? Use css transform / scale? – someoneHere Oct 02 '15 at 07:44
  • @someoneHere Yes, you can use decimal value with percent, pt, em. But sometimes it can works inconsistently for different browsers. – zucker Oct 02 '15 at 07:51