CSS box-sizing Property – Defines the Element’s Sizing Calculation Model

Definition and Usage

The box-sizing property defines whether an element's size is assigned to the content box or the border box.

There are two reference areas used when calculating an element's size:

content-box

Only the content area is included in the size calculation.
border-box

Content, padding, and border areas are all included in the size calculation.

See the difference in sizing calculation between content-box and border-box in the diagram. In the illustration, each colored area represents the content, padding, and border of the element.

Basic Example

Let's look at how the box-sizing property works with the following example:

CSS

div {
    width: 150px;
    height: 150px;
    padding: 50px;
    border: 5px solid gold;
}
.div-a {
    box-sizing: content-box; /* Calculates size based on content only */
}
.div-b {
    box-sizing: border-box; /* Includes content, padding, and border in size calculation */
}

Formal syntax

Syntax

CSS

/* Keyword values */
box-sizing: content-box;
box-sizing: border-box;

/* Global values */
box-sizing: inherit;
box-sizing: initial;
box-sizing: revert;
box-sizing: revert-layer;
box-sizing: unset;

Formal definition

Formal definition of the box-sizing Property
Initial value	`content-box`
Applies to	all elements that accept `width` or `height`
Inherited	no
Animation type	discrete

Note:
The <button> element uses border-box as its default in browsers.

Warning:
There is no padding-box value for the box-sizing property.

Values

The box-sizing property specifies whether an element's size is calculated based on the content-box or the border-box.

`content-box`

width calculation = content width
height calculation = content height

The content-box value calculates an element's width and height based only on the content area. padding and border are not included in the calculation; they are added outside the element's size.

If the element has padding or a border, it will appear larger than the actual specified dimensions.

For all elements that allow width or height, except the <button> element, this is the default initial value set by browsers.

`border-box`

width calculation = content width + padding-left + padding-right + border-left-width + border-right-width
height calculation = content height + padding-top + padding-bottom + border-top-width + border-bottom-width

The border-box value calculates an element's width and height including content, padding, and border.

Even if the element has padding or a border, the element's actual rendered size matches the specified width and height.

Example

CSS

.div-1 {
    box-sizing: content-box;
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 5px solid red;
    /* Total width: 200px + (2 * 10px) + (2 * 5px) = 230px
       Total height: 100px + (2 * 10px) + (2 * 5px) = 130px
       content-box width: 200px
       content-box height: 100px */
}
.div-2 {
    box-sizing: border-box;
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 5px solid blue;
    /* Total width: 200px
       Total height: 100px
       content-box width: 200px - (2 * 10px) - (2 * 5px) = 170px
       content-box height: 100px - (2 * 10px) - (2 * 5px) = 70px */
}

As you can see from the example above, div-1 is set to box-sizing: content-box;, so padding and border are not included in the size calculation. As a result, the element appears larger than the specified width and height.

On the other hand, div-2 is set to box-sizing: border-box;, which includes the padding and border in the element's size, so the rendered width and height match the specified values.

In practice, using box-sizing: border-box; is often more intuitive for specifying element sizes.

To apply box-sizing: border-box; to all elements, you can use the following CSS:

Browser compatibility

Browser compatibility for the box-sizing property
Property	Desktop Chrome	DesktopDesktop Edge	Desktop Firefox	Safari
`box-sizing`	10	12	29	5.1

Specifications

Specification for the box-sizing property
Specification
`box-sizing`	CSS Box Sizing Module Level 3 #box-sizing