CSS box-sizing Property

The box-sizing property specifies how width and height are calculated.

By default, padding and borders are excluded from these calculations.

Element sizes may be calculated with or without padding and border values.

Example

#

Element sizes are calculated without padding and border.

Width and height are calculated without padding and border
<style>
  .box-sizing-content {
    padding: 25px;
    border: 10px solid aliceblue;
    width: 300px;
    box-sizing: content-box;
  }
</style>

<div class="box-sizing-content">
  Width and height are calculated 
  without padding and border
</div>

Syntax

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

Values

#

Value Description
content-box Default. Excludes padding and border for width and height calculations.
border-box Includes padding and border for width and height calculations.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different box-sizing values.

box-sizing: border-box
<style>
  .box-sizing-border {
    padding: 25px;
    border: 10px solid aliceblue;
    width: 300px;
    box-sizing: border-box;
  }
</style>

<div class="box-sizing-border">
  box-sizing: border-box
</div>

Browser support

This table shows when box-sizing support started for each browser.

Chrome
10.0 Mar 2011
Firefox
29.0 Apr 2014
IE/Edge
8.0 Mar 2009
Opera
9.5 Jun 2008
Safari
5.1 Oct 2011

You may also like

Guides