title: CSS how to round of percent values to whole number pixel
body: <p>In CSS, when width, height, margin etc use percentages, the result will sometimes come back with a fractional pixel length, e.g. 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. </p>
  
  <p>For example, in the code below, Chrome rounds 50.6px to 50px, which isn't the mathematical standard.</p>
  
  <pre><code>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));
  </code></pre>
  
  <p>In JavaScript this would be achievable using the ceil function, but can it be done in pure CSS?</p>