Box Sizing
Include padding and border in an element's width.
Syntax
* { box-sizing: border-box; }By default (content-box), an element's width covers only the content; padding and border are added on top, making the box wider than expected.
Setting box-sizing: border-box makes width include padding and border, so the box stays the size you set. Many developers apply it to all elements.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer applies box-sizing: border-box in a global reset so that all elements' declared widths include padding and border, preventing layout overflows.
- A developer sets a sidebar to width: 300px with padding and confirms it stays exactly 300px wide because border-box is in use.
- A team adds a *, *::before, *::after rule at the top of every project stylesheet so box-sizing is consistent across all browsers and components.
More examples
Global border-box reset
The industry-standard global reset that makes every element include padding and borders within its declared width.
*,
*::before,
*::after {
box-sizing: border-box;
}Content-box versus border-box
Side-by-side comparison showing how the two box-sizing values change the total rendered width of identical elements.
/* default: total rendered = 200 + 40 + 4 = 244px */
.content-box {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 2px solid #2965f1;
}
/* border-box: total rendered = exactly 200px */
.border-box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 2px solid #2965f1;
}Sidebar fixed width with padding
Demonstrates that border-box keeps the sidebar at exactly 280px regardless of padding and border values.
.sidebar {
box-sizing: border-box;
width: 280px;
padding: 24px;
border-right: 1px solid #e0e0e0;
/* 280px is the full rendered width — padding included */
}
Discussion