CSS3 box-sizing Property

Example

Specify two bordered boxes side by side:

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

Try it yourself »

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The box-sizing property is only supported in Internet Explorer and Opera.

Firefox supports an alternative, the -moz-box-sizing property.

Safari and Chrome support an alternative, the -webkit-box-sizing property.


Definition and Usage

The box-sizing property allows you to define certain elements to fit an area in a certain way.

For example, if you’d like 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
Version: CSS3
JavaScript syntax: object.style.boxSizing="border-box"


Syntax

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

Value Description
content-box This is the behavior of width and height as specified by CSS2.1. The specified width and height (and min/max properties) apply to the width and height respectively of the content box of the element. The padding and border of the element are laid out and drawn outside the specified width and height
border-box The specified width and height (and min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified 'width' and 'height' properties
inherit Specifies that the value of the box-sizing property should be inherited from the parent element