CSS3 box-sizing Property
Example
The total height and width of the element include padding and border (padding and border):
#example1 {
box-sizing: border-box;
}
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit-, -ms-, or -moz- specify the first version that worked with a prefix.
| Property | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| box-sizing | 10.0 <br>4.0 -webkit- | 8.0 | 29.0 <br>2.0 -moz- | 5.1 <br>3.2 -webkit- | 9.5 |
Property Definition and Usage
The box-sizing property defines how the width and height of an element are calculated, whether to include padding and border.
For example, if you need to place two bordered boxes side by side, you can set box-sizing to "border-box". This allows the browser to render the boxes with the specified width and height, including the border and padding within the box.
By default, the width and height of an element are calculated as follows:
width + padding + border = actual width of an element
height + padding + border = actual height of an element
| Default value: | content-box |
|---|---|
| Inherited: | no |
| Version: | CSS3 |
| JavaScript syntax: | object.style.boxSizing="border-box" |
Syntax
| Value | Description |
|---|---|
| content-box | Default value. If you set an element's width to 100px, the content area will be 100px wide, and any border and padding widths will be added to the final rendered width of the element. |
| border-box | Tells the browser that the values for border and padding are included in the width. This means if you set an element's width to 100px, those 100px will include its border and padding, and the actual content width is the width minus (border + padding). This is often more intuitive for setting an element's dimensions. <br> Note: border-box does not include margin. |
| inherit | Specifies that the value of the box-sizing property should be inherited from the parent element. |
More Examples
Example
Setting two bordered boxes side by side:
div {
box-sizing: border-box;
width: 50%;
border: 5px solid red;
float: left;
}
Example
Setting a universal box-sizing:
* {
box-sizing: border-box;
}
Related Articles
CSS3 Tutorial: CSS3 User Interface