Strange border-width behavior in Chrome - Floating point border-width?

I can't reproduce this behavior in Chrome currently, but this behavior most likely has to do with Subpixel Rendering. Essentially, Webkit will do calculations using integer math to avoid floating point imprecision.

It seems that currently, border does not use subpixel rendering which may explain why the issue is not visible in new Chrome versions.


Does setting box-sizing to border-box for all elements help at all? This will change the way the box model is calculated where the border and padding won't affect the width.

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

To reproduce your problem I have to change the zoom-level of Chrome. Changing the zoom-level back to 100% fixes it. It appears to be a bug, the calculated border width is always smaller than the defined border width, zooming in or out!

Your 10px border does give a value of 10 when the zoom-level is 110%, but on 125% it has the same problem as your 3px border.

edit: firefox has the same behavior!