20

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.

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?

Sinister Beard
  • 3,570
  • 12
  • 59
  • 95
Chintan_chiku
  • 425
  • 2
  • 12
  • 24
  • what do you mean by "doing in css"? You can try to use some css framework like sass or less. – Krab Mar 05 '14 at 07:16
  • 1
    i want result of percent should be round of to next integer value. like 100.25px to 101px – Chintan_chiku Mar 05 '14 at 07:17
  • yeah, but why in css...? – Krab Mar 05 '14 at 07:18
  • like @Krab said, you can do something like that in less or sass. but i dont think it's what you want. here's an example http://stackoverflow.com/questions/17495302/can-numbers-be-rounded-math-term-using-less-css – Tom Prats Mar 05 '14 at 07:19
  • between divs gap is visible and many look wise issues – Chintan_chiku Mar 05 '14 at 07:20
  • same question is asked http://stackoverflow.com/questions/4308989/are-the-decimal-places-in-a-css-width-respected – Azhar Shaikh Mar 05 '14 at 07:20
  • 2
    @OP: You've got a pretty well-hidden case of [the XY-problem](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem), I think. – Jeroen Mar 05 '14 at 07:22

1 Answers1

7

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.

Sinister Beard
  • 3,570
  • 12
  • 59
  • 95