The box-sizing property controls whether an element's specified width and height include its padding and border, or refer only to the content area, fundamentally changing how box dimensions are calculated.

Syntax

box-sizing: content-box | border-box;

Deep Dive Course

box-sizing: content-box, the default, means width and height apply only to the content area, with padding and border added on top, expanding the element's total rendered size beyond the specified dimensions. box-sizing: border-box instead makes width and height represent the element's complete final size, including padding and border, automatically shrinking the content area to accommodate them rather than growing the total box — this is widely considered the more intuitive, predictable model, which is exactly why applying a universal box-sizing: border-box rule near the top of a stylesheet is one of the most common, near-universal CSS reset conventions in modern web development.

1Understanding Box-sizing

💡

Apply box-sizing: border-box on the universal selector as one of the first rules in nearly any project's stylesheet — it makes width/height calculations far more predictable, since padding and border no longer silently expand an element beyond its specified dimensions.

editor.html

* {
  box-sizing: border-box;
}

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

localhost:3000

2Practical Example

Here is a real-world application of Box-sizing showing how it is used in production CSS code.

editor.html

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: content-box;
}

localhost:3000

3Best Practices

Follow these guidelines when working with Box-sizing:

1. Apply box-sizing: border-box globally via the universal selector near the top of a stylesheet, as one of the most common, widely-adopted CSS reset conventions

2. Remember that under border-box, adding padding or border shrinks the available content area rather than growing the element's total size

3. Be aware some third-party components or older code might assume content-box's default behavior, so test carefully when introducing a global border-box reset into an existing, previously content-box-based codebase

⚠️

Tip: Apply box-sizing: border-box on the universal selector as one of the first rules in nearly any project's stylesheet — it makes width/height calculations far more predictable, since padding and border no longer silently expand an element beyond its specified dimensions.

editor.html

* {
  box-sizing: border-box;
}

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

localhost:3000

Examples

Example 01Basic Usage

* {
  box-sizing: border-box;
}

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

Example 02Advanced Example

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: content-box;
}

Best Practices

Apply box-sizing: border-box globally via the universal selector near the top of a stylesheet, as one of the most common, widely-adopted CSS reset conventions
Remember that under border-box, adding padding or border shrinks the available content area rather than growing the element's total size
Be aware some third-party components or older code might assume content-box's default behavior, so test carefully when introducing a global border-box reset into an existing, previously content-box-based codebase

Interview Question

Why is applying box-sizing: border-box globally considered one of the most valuable, widely-adopted single-line additions to a modern CSS reset?▼

Hint: Think about how much simpler width/height math becomes once padding and border no longer unpredictably expand an element beyond its specified size.

Under the default content-box model, calculating an element's actual final rendered size requires mentally adding together its specified width plus all of its padding plus all of its border on each side, a calculation that has to be redone anywhere that width, padding, or border values change, and that becomes especially error-prone and tedious once nested elements, percentage-based widths, or responsive layouts are involved. box-sizing: border-box eliminates that entire mental calculation by making the width/height values you actually write directly represent the element's true final rendered size, with padding and border simply carving out space from within that already-fixed total rather than adding to it — this means a developer can specify width: 100% and confidently add padding or a border without that addition ever pushing the element wider than its container, a guarantee content-box simply doesn't provide. Because this more intuitive, predictable sizing model benefits virtually every layout without introducing meaningful downsides for the vast majority of use cases, applying it universally via the universal selector has become one of the most consistently recommended, nearly-default conventions across modern CSS resets and frameworks.

Exercises

MediumPractice using Box-sizing in a real scenario.

View Solution

* {
  box-sizing: border-box;
}

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

Frequently Asked Questions

Why is applying box-sizing: border-box globally considered one of the most valuable, widely-adopted single-line additions to a modern CSS reset?▼

Related Functions

PaddingMarginRefDimensions