Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Browsers truncate border values to integers

Tags:

Whenever a non-integer pixel value is used for the border of an element, the browser simply truncates the value to become an integer. Why is this the case?

I'm aware that the border will not actually take up part of a pixel, but these types of values are sometimes used in combination with others to form full pixels. For example, the left and right border having widths of 1.6px should cause the total width of the element to increase by 3px. This works because the full value is stored in memory and used for calculations.

However, this seems to not be the case when rendering the border even though width, padding, and margin all behave correctly.

var div = document.getElementsByTagName('div'),
    len = div.length,
    style;
for (var i = 0; i < len; i++) {
    style = getComputedStyle(div[i]);
    div[i].innerHTML = div[i].className + ': ' + style.getPropertyValue(div[i].className) + '<br>height: ' + style.getPropertyValue('height');
}
div {
    width: 300px;
    border: 1px solid black;
    padding: 50px 0;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
div.width {
    width: 300.6px;
}
div.padding-top {
    padding-top: 50.6px;
}
div.margin-top {
    margin-top: 0.6px;
}
div.border-top-width {
    border-top-width: 1.6px;
}
<div class="width"></div>
<div class="padding-top"></div>
<div class="margin-top"></div>
<div class="border-top-width"></div>

When tested, the code produced the same results (disregarding exact precision) consistently. Most major browsers (Chrome, Firefox, Opera) behaved the same. The exceptions were Safari 5.1 (which rendered padding and margin similar to border, but this is probably just due to the version) and Internet Explorer (which calculated the border-top-width correctly).

Width, padding, and margin all were remembered as decimal values and allowed for padding to affect height accordingly, but border was not. It was truncated to an integer. Why is this specifically only the case width border? Would there be any way to make the border value be remembered in a fuller form so that the true height of the element could be retrieved using JavaScript?