Cannot get .5px side border to render correctly in IE7

[truthiness]

I'm trying to get a div to display a side border of .5px, and when I use the border-width attribute it renders correctly in Firefox, but in IE7, it looks like a thick border.

Any suggestions?

[Wlauzon]

If I recall correctly it has to do with the way that some browsers treat rounding up or down.

Since .5px is not really a valid value I suspect it is going buggy by rounding down to zero, while perhaps the other browsers round up to 1.

And the real question might be, is it really that critical that a border be within .5px.

[johnjoyce]

rounding is one possibility.
less than 1px for borders and margins is not reliable.
another possibility is "border collapsing"
a standard part of CSS.
Look it up at several sources to find an explanation that is clear to you.
The rules of border collapsing are fairly simple, but not always straight forward and easy.

the short version:
sometimes borders will "collapse" meaning they may merge with a neigboring border, or they may seem to disappear entirely.

[penders]

Unfortunately I cannot speak for IE7 at the mo... but (on a screen) in FF, fractional px values tend to be rounded to the nearest whole px. So, a border-width of 0.5px would be rounded to 1px. However, IE6 and Opera8 seem to simply ignore the fractional part, so even a border-width of 0.9px in these browsers would result in a border-width of 0px (regardless of whether you use border: or border-width:).

... 0.5px is not really a valid value...

It's perfectly valid in terms of W3C validation, but exactly how the browser should cut a pixel in half is debatable.

Fractional px values may, however, be interpreted more accurately when printed? Where 1px maybe equivalent to 10 dots on a printer. But then I guess you should be using a print stylesheet and pt's.

...but in IE7, it looks like a thick border.

I suspect IE7 may use fractional px values more accurately (a complete guess) due to its ability to 'zoom' in/out of the page quite smoothly? In which case, are you viewing your page at exactly 100%?

... and welcome to WebmasterWorld truthiness! :)

[Wlauzon]

... 0.5px is not really a valid value...

It's perfectly valid in terms of W3C validation, but exactly how the browser should cut a pixel in half is debatable.

While it is valid markup, it is not really valid technically. A pixel is like a dot in physical terms as far as the computer screen is concerned. Each pixel on the screen occupies a definate spot on the "grid", so trying to tell it to go 1/2 pixel is like trying to move half a square on a checker board (sort of).

While that is over simplified, it is not just a software issue - not all computer screens treat fractional pixels the same way. Some will interpolate (or try to), some will not. Some will choose the nearest whole number value. It is somewhat unpredictable, which is one reason why some fonts look "fuzzy" on some computers.

I delved into this a while back, and have forgotten most, but from what I recall is that most computers can choose partial pixel values horizontally, but vertically only full pixel values.

This effect is pretty easy to demonstrate with CSS - just make a list and try setting font size to various numbers - often 12.5 px will be no change, but 12.6 will jump to the next size. (those numbers are just random, some fonts scale different).

[edited by: Wlauzon at 10:31 am (utc) on Nov. 13, 2006]