CSS3 Proprietary and Emerging Features Reference - HTML and CSS: The Complete Reference - page 658

Compatibility

CSS3 Chrome 3+, Firefox 3.5+, Safari 3+

Note

• Currently, this property is supported in Mozilla-based browsers like Firefox as
-moz-box-shadow and in WebKit-based browsers like Chrome and Safari as
-webkit-box-shadow .

box-sizing
This property changes the calculation for measuring the width of elements.

Syntax
box-sizing: border-box | content-box | inherit

The default content-box specifies that element size is defined by adding the border,
padding, and height/width together to define the size of the box, which is what is typically
seen in browsers. When set to border-box , a supporting browser will render the box by the
defined height and width properties, pulling the border and padding size from within the
box, similar to much older box model thinking.

Examples
#ex1 {-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 100px; width: 200px;
background-color: orange;
border: 10px solid red;
padding: 10px;}

#ex2 {-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
height: 100px; width: 200px;
background-color: orange;
border: 10px solid red;
padding: 10px;}