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.
Element sizes 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>
box-sizing: content-box | border-box | initial | inherit;
| 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. |
Click the buttons to see the different box-sizing values.
<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>
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 |
