CSS box-sizing Property

Example

Include padding and border in the element's total width and height:

#example1 {
  box-sizing: border-box;
}

Definition and Usage

The box-sizing property defines how the width and height of an element are calculated: should they include padding and borders, or not.

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

  • Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
  • object - object in javascript means the element on which box-sizing is applied.
  • Animatable - "Animatable = no" means that it cannot be animated with CSS @keyframes.

Browser Support

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

CSS Syntax

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

Property Values

Value Description Demo
content-box Default. The width and height properties (and min/max properties) includes only the content. Border and padding are not included
border-box The width and height properties (and min/max properties) includes content, padding and border
initial Sets this property to its default value.  
inherit Inherits this property from its parent element.  

More Examples

Example

Specify two bordered boxes side by side:

div {
  box-sizing: border-box;
  width: 50%;
  border: 5px solid blue;
  float: left;
}

Example

Set the "universal box-sizing":

* {
  box-sizing: border-box;
}

Comments