CSS box-sizing Property
The box-sizing property sets how the total width and height of an element are calculated (including or excluding padding and border).
Description & Usage
The box-sizing property controls the sizing calculation algorithm used for CSS boxes.
Under content-box (the browser default), width applies only to content. Adding 20px padding and a 2px border to a width: 200px box results in a rendered width of 244px, causing unexpected horizontal scrollbars or broken grid columns.
Applying box-sizing: border-box forces width and height to include content, padding, and border, keeping final element dimensions fixed and predictable.
Property Specifications
| Property Feature | Specification |
|---|---|
| Category | Box Model |
| Initial Value | content-box |
| Inherited | No (not inherited) |
| Applies To | All elements that accept width or height |
Syntax
box-sizing: content-box | border-box;Property Values
| Value | Description |
|---|---|
| content-box | Default. Width and height apply only to content. Padding and border add to final rendered width. |
| border-box | Recommended. Width and height include content, padding, and border. Prevents layout overflow. |
Code Examples
Global Box-Sizing Reset
*, *::before, *::after {
box-sizing: border-box;
}
Ensures predictable box sizing calculations across entire stylesheet.