Specify two bordered boxes side by side:
The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.
Should they include the border-box or just the content-box which is the default value of the width and height properties.
For example, if you want two bordered boxes side by side, it can be achieved through setting box-sizing to "border-box". This forces the browser to render the box with the specified width and height, and place the border and padding inside the box.
Default value: | content-box |
---|---|
Inherited: | no |
Animatable: | no. Read about animatable |
Version: | CSS3 |
JavaScript syntax: | object.style.boxSizing="border-box" Try it |
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.
Property | |||||
---|---|---|---|---|---|
box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.2 -webkit- |
9.5 |
Value | Description |
---|---|
content-box | Default. The width and height properties (and min/max properties) includes only the content. Border, padding, or margin are not included |
border-box | The width and height properties (and min/max properties) includes content, padding and border, but not the margin |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
CSS3 tutorial: CSS3 User Interface
HTML DOM reference: boxSizing property