box-sizing: border-box
The `box-sizing: border-box` property changes how an element's `width` and `height` are calculated, making them include padding and border.
element { box-sizing: border-box; }This static page keeps the syntax and examples indexed for search, while the coding app handles interactive exploration and saved references.
What it does
Overview
The `box-sizing: border-box` property changes how an element's `width` and `height` are calculated, making them include padding and border.
The `box-sizing` CSS property controls how the total width and height of an element are calculated. By default, browsers use `box-sizing: content-box`. In this default mode, `width` and `height` properties only refer to the content area of the element. Any `padding` and `border` values are then added *on top* of this content width/height, increasing the element's total rendered size. This often leads to unexpected layout shifts and makes it difficult to predict an element's final dimensions, especially when using percentages or complex layouts.
`box-sizing: border-box`, on the other hand, fundamentally changes this calculation. When `border-box` is applied, the `width` and `height` properties now include the content, padding, and border. This means that if you set an element's `width` to `100px` and then add `10px` of padding and a `2px` border, the content area will shrink to `76px` (`100 - 2*10 - 2*2`), but the total rendered width of the element (including padding and border) will remain exactly `100px`. This behavior is generally much more intuitive for layout design, as it allows developers to define an element's outer dimensions directly. It simplifies responsive design, grid systems, and overall layout management, making it a widely adopted best practice to apply `box-sizing: border-box` globally to all elements using `* { box-sizing: border-box; }` or `html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; }`.
Quick reference
Syntax
element { box-sizing: border-box; }See it in practice
Examples
Default `content-box` behavior
<style>
.box-content {
width: 100px;
height: 50px;
padding: 10px;
border: 5px solid red;
background-color: lightcoral;
}
</style>
<div class="box-content"></div>A lightcoral box with a red border. Its actual rendered width will be 130px (100 + 2*10 + 2*5).
With `content-box` (the default), the `width` and `height` only define the content area. Padding and border are added to these dimensions, increasing the total size.
Using `border-box` for predictable sizing
<style>
.box-border {
box-sizing: border-box;
width: 100px;
height: 50px;
padding: 10px;
border: 5px solid blue;
background-color: lightblue;
}
</style>
<div class="box-border"></div>A lightblue box with a blue border. Its actual rendered width will be exactly 100px.
With `border-box`, the `width` and `height` properties now include the padding and border. The content area shrinks to accommodate them, but the element's total size remains fixed.
Global `border-box` reset
<style>
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
.my-element {
width: 100px;
padding: 10px;
border: 1px solid green;
background-color: lightgreen;
}
</style>
<div class="my-element"></div>A lightgreen box with a green border. Its actual rendered width will be exactly 100px, due to the global `border-box` setting.
This is a common best practice: set `box-sizing: border-box` on `html` and `inherit` on `*` and pseudo-elements. This ensures all elements behave predictably without explicitly setting `box-sizing` on each one.
Debug faster
Common Errors
Unexpected Layout Shifts
Cause: Mixing `content-box` and `border-box` elements, or forgetting to apply `border-box` globally, leading to inconsistent sizing and broken layouts.
Fix: Adopt a consistent `box-sizing` strategy. The most common and recommended approach is to apply `box-sizing: border-box` globally to all elements. This ensures predictable sizing across your entire project.
div { width: 100px; padding: 10px; } /* Default content-box */
span { width: 100px; padding: 10px; box-sizing: border-box; } /* Different sizing behavior */Runtime support
Compatibility
Source: MDN Web Docs
Common questions
Frequently Asked Questions
The `box-sizing: border-box` property changes how an element's `width` and `height` are calculated, making them include padding and border.
Unexpected Layout Shifts: Adopt a consistent `box-sizing` strategy. The most common and recommended approach is to apply `box-sizing: border-box` globally to all elements. This ensures predictable sizing across your entire project.