Border-box CSS not working properly

Question

I have the following code: http://www.designated.net.au/testbed/test/

 body {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    background: #000000;
 }

 #page {
    margin:0% 10% 0% 10%;
    width:80%;
    height:1000px;
    border:solid #333333;
    border: 0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
 }

As far as I know that should give me an inner border on the left and right of 10px, but instead I get a border inside the whole thing of about 2px.

Any ideas?

Answer 1

Fixed for me in Chrome, Safari, IE 7/8/9: http://jsfiddle.net/XsNck/

I believe your border declaration syntax was incorrect.

Not Working

border:solid #333333;
border: 0 10px;

Working

border-style: solid;
border-color: #333;
border-width: 0 10px;

From the spec:

The ‘border’ property is a shorthand property for setting the same width, color, and style for all four borders of a box. Unlike the shorthand ‘margin’ and ‘padding’ properties, the ‘border’ property cannot set different values on the four borders. To do so, one or more of the other border properties must be used.

See also: https://developer.mozilla.org/en-US/docs/CSS/border-style

Incidentally (in light of the question title), this isn't directly related to the box-sizing property; box-sizing controls how the dimensions of a box are calculated (specifically, whether or not to include padding and borders). It doesn't change the border size.