The box-sizing property allows you to change how the browser calculates the size of the element’s box or in other words it lets you define if the browser will include border-box or just content-box within the element’s box width and height properties.

Syntax:

selector { 

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

}

Values:

The box-sizing allows these values:

  • content-box; This is the default value. The width and height properties, including min-width and min-height, will include only the content of the box, meaning that margins, borders and padding areas will be excluded.
  • border-box; The width and height properties, including min-width and min-height, will include the content of the box together with the margins, borders and padding areas.
  • initial, inherit

Example

The box-sizing property example:

 

›› go to examples ››