Syntax
box-sizing: content-box | border-box;Examples
content-box vs border-box
The same declared width producing different rendered sizes.
.content-box {
box-sizing: content-box; /* default */
width: 200px;
padding: 20px;
border: 5px solid black;
/* Rendered width: 200 + 40 + 10 = 250px */
}
.border-box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid black;
/* Rendered width: exactly 200px - padding/border eat into the content area instead */
}The Universal Reset
The standard way nearly every project applies border-box globally.
*, *::before, *::after {
box-sizing: border-box;
}Parameters and values
- content-box (keyword): Width/height apply to content only (default, less intuitive)
- border-box (keyword): Width/height include padding and border (recommended)
Best practices
- Apply box-sizing: border-box globally at the start of every project - it makes sizing predictable and is nearly universal practice
- Remember border-box does not affect margin - margin is always added outside the declared width regardless of this setting
- Set this once in a reset rather than per-component, so all elements behave consistently
At a glance
- Purpose
- Presentation and layout
- File extension
- .css
- Runs in
- Web browsers
- Usually used with
- HTML and JavaScript
Specifications & further reading
Related CSS documentation
The Box Model
Every element in CSS is a rectangular box made up of four layers, from innermost to outermost: content, padding, border, and margin. Understanding the box model is fundamental to controlling layout - it explains exactly how much space an element actually occupies and how that space is distributed.display Property
The display property determines how an element generates boxes and participates in layout. block elements start on a new line and fill available width. inline elements flow within text and ignore width/height. inline-block combines inline flow with block-like sizing control. none removes the element from layout entirely.position Property
The position property controls how an element is positioned in the document. static is the default, following normal flow. relative positions an element relative to its normal position. absolute removes it from flow entirely, positioning it relative to its nearest positioned ancestor. fixed positions relative to the viewport, staying in place during scroll. sticky toggles between relative and fixed based on scroll position.overflow Property
overflow controls what happens when content is too large to fit its container. visible (default) lets content spill out. hidden clips anything beyond the box. scroll always shows scrollbars. auto adds scrollbars only when needed. overflow-x and overflow-y control each axis independently.
Every element in CSS is a rectangular box made up of four layers, from innermost to outermost: content, padding, border, and margin. Understanding the box model is fundamental to controlling layout - it explains exactly how much space an element actually occupies and how that space is distributed.display Property
The display property determines how an element generates boxes and participates in layout. block elements start on a new line and fill available width. inline elements flow within text and ignore width/height. inline-block combines inline flow with block-like sizing control. none removes the element from layout entirely.position Property
The position property controls how an element is positioned in the document. static is the default, following normal flow. relative positions an element relative to its normal position. absolute removes it from flow entirely, positioning it relative to its nearest positioned ancestor. fixed positions relative to the viewport, staying in place during scroll. sticky toggles between relative and fixed based on scroll position.overflow Property
overflow controls what happens when content is too large to fit its container. visible (default) lets content spill out. hidden clips anything beyond the box. scroll always shows scrollbars. auto adds scrollbars only when needed. overflow-x and overflow-y control each axis independently.