[SOLVED] background-size by percentage when box-sizing is border-box

background-size by percentage when box-sizing is border-box

i am trying to create a grid in a div using background. naturally, the background-size property is a nice way to create a grid, where a size of 10% will create 10 evenly-spaced cells in the div, e.g.:

div{
 width:200px;
 border:solid 1px black;
 background-size: 10% 1px;
 background-image: linear-gradient(to left, gray 1px,  transparent 1px);
}

<div>x</div>

however, i also need box-sizing to be "border-box" because otherwise the box takes up more pixels than specified via the width property. and this causes all kinds of havoc in Chrome with the background-size by percentage specification, e.g.:

div{background-color:white;}
#d1 { 
    width:200px;
    border:solid 1px black;
    background-size: 10% 1px;
    background-image: linear-gradient(to left, gray 1px, transparent 1px);
    padding:5px;
    box-sizing:border-box;
}
#d2 { 
    width:200px;
    border:solid 1px black;
    background-size: 10% 1px;
    background-image: linear-gradient(to left, gray 1px, transparent 1px);
    padding:5px;
}

<div id="d1">more than 10 cells</div>
<p>
<div id="d2">box is bigger than 200px</div>

note that there are more than 10 cells displayed in the top div (d1), despite the fact that each is supposed to be 10% of the div width.

it seems that this is only a Chrome issue, but if someone has the solution to this, please let me know.

Solution

Andrei Gheorghiu's answer was really good, but wasn't consistent across all browsers, and was a few pixels off for some separator locations. Anyway, here's the more consistent answer, seems to work everywhere:

div { 
  background-color:white;
  width:200px;
  border:solid 1px black;
  background: repeating-linear-gradient(to left, red, red 1px, white 2px, white 10%);
  box-sizing:border-box;
}

div ~ div { 
  width:300px;
  }

<div>exactly 10 red separators</div>
<div>also exactly 10 red separators</div>