CSS how to round of percent values to whole number pixel

Question

In CSS, when width, height, margin etc use percentages, the result will sometimes come back with a fractional pixel length, eg 100.25px. I want to know how to round off this to the next integer. This seems to be quite a common issue; I've searched around it a lot, but have yet to find a solution.

For example, in the code below, Chrome rounds 50.6px to 50px, which isn't the mathematical standard.

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9e7d0), color-stop(72%,#f9e7d0), color-stop(72%,#207cca), color-stop(72%,#b08b5b), color-stop(100%,#b08b5b));

In JavaScript this would be achievable using the ceil function, but can it be done in pure CSS?

Answer 1

Browsers round fractional pixels automatically - some up, some down; this is hard coded into the browsers so there's no way to force it to do one or the other with CSS.

A more indepth look at how different browsers treat fractional pixels can be found here .