CSS box-sizing property

Definition and usage

The box-sizing property allows you to define a specific way to match a specific element in a certain area.

For example, if you need to place two framed boxes side by side, you can set box-sizing to "border-box". This will cause the browser to display boxes with specified width and height, and put the border and padding inside the box.

See also:

CSS3 Tutorial:CSS3 User Interface

HTML DOM Reference Manual:boxSizing property

Example

Specifies two side-by-side framed boxes:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

Try it yourself

More examples are at the bottom of the page.

CSS syntax

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

Attribute value

Value Description
content-box

This is the width and height behavior specified by CSS2.1.

Width and height are applied separately to the element's content box.

Padding and borders of the element are drawn outside the width and height.
border-box

The width and height set for the element determine the element's border box.

That is, any padding and border specified for the element will be drawn within the set width and height.

The width and height of the content can be obtained by subtracting the border and padding from the set width and height.
inherit Specifies that the value of the box-sizing property should be inherited from the parent element.

Technical details

Default value: content-box
Inheritance: no
Version: CSS3
JavaScript syntax: object.style.boxSizing="border-box"

Browser support

The numbers in the table indicate the first browser version that fully supports this property.

Numbers with -webkit- or -moz- prefixes indicate the first version using the prefix.

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 8.0 29.0
2.0 -moz-		 5.1
3.2 -webkit-		 9.5