Box-Sizing Property
Last updated: 2026-09-13
box-sizing Box-Sizing Property
The box-sizing property determines how width and height are calculated and is the key to understanding the CSS box model. The default value, content-box, sizes only the content area, with padding and border added on top; border-box includes padding and border within the specified width and height, which is more intuitive. Modern projects commonly set border-box globally.
| Category | |
|---|---|
| Initial Value | content-box |
| Inherited | No |
| Applies To | all |
| Animation Type | discrete |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
box-sizing: content-box | border-box;⚙️ Values
| Value | Type | Description |
|---|---|---|
content-box | Keyword | Width/height include only the content area (default). |
border-box | Keyword | Width/height include content, padding, and border. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| box-sizing | ✓ v10 | ✓ v12 | ✓ v29 | ✓ v5.1 | ✓ v7 |
| Supported in all major browsers | |||||
Tip： It's recommended to set *{box-sizing:border-box} globally so every element sizes consistently, avoiding layout surprises.
❓ FAQ
QWhat's the difference between content-box and border-box?
AWith content-box, the default, width refers only to the content area and padding and border are added outside it, so you have to do the math yourself. With border-box, width already includes padding and border, so the width you set is the final visible width and content shrinks inward. border-box is more intuitive, which is why modern projects enable it globally for every element.
QWhy does everyone recommend border-box?
Aborder-box makes layout math simple: width:200px is the actual space the element occupies, and padding and border squeeze inward instead of widening the box and disrupting the layout. This is especially valuable for responsive layouts that combine percentage widths with fixed padding, since it prevents overflow. That is why the global reset *{box-sizing:border-box} is so widely recommended by frameworks and in nearly every modern CSS reset.
QHow do I set all elements to border-box globally?
AAdd this at the top of your CSS: *, *::before, *::after { box-sizing:border-box; }, applying border-box to every element and pseudo-element. One caveat: if a third-party component, such as a form control, relies on the default content-box behavior, the global override may change how it renders, so switch those specific components back to content-box if needed. This one-line reset removes an entire class of layout bugs.
QWhich elements are border-box by default?
AIn most browsers, some form controls, including input, textarea, select, and button, default to border-box, so an input's height already includes its border. Everything else defaults to content-box. Browsers have historically disagreed on the default box-sizing of form controls, which is exactly why UI frameworks normalize box-sizing in their reset styles; assuming content-box everywhere is the safest mental model until you override it.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
