box-sizing

The box-sizing property designates how the width and height of an element should be calculated: including padding and borders, or not.

Syntax

Example:

div.ex {
  box-sizing: border-box;
}

Values

content-box
Default value. The width, height, and min/max properties includes only the content.

border-box
The width, height, and min/max properties includes the content, padding, and border.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of box-sizing? Submit a codepen.io demo and we'll showcase it here ↴