The CSS box-sizing property

Q: Why do developers set box-sizing on everything?

Because the default content-box adds padding and border on top of the width, which makes layouts hard to reason about. border-box on * fixes that everywhere at once.

Q: What is the difference between content-box and border-box?

With content-box, width covers only the content. With border-box, width includes the padding and border, so the element's total size matches the value you set.

Q: Does box-sizing affect margins?

No. Margins always sit outside the box. box-sizing only changes whether padding and border are counted inside the width and height.

Property CSS All modern browsers Updated June 22, 2026

Quick answer

The CSS box-sizing property decides what an element's width and height measure. The default, content-box, counts only the content, so padding and border are added on top. border-box includes the padding and border in the size — which is why almost every modern stylesheet sets it on everything.

Overview

box-sizing answers a question that confuses nearly everyone at first: when you set width: 200px, does that include the padding and border, or not? By default — content-box — it does not. Add 20px of padding and a 2px border, and your "200px" box is actually 244px wide.

That math is a constant source of layout surprises, so the fix has become a near-universal convention: set box-sizing: border-box, which folds the padding and border back inside the declared size. Now width: 200px means 200px on screen, full stop, with the content shrinking to make room for padding rather than the box growing.

You will see it applied globally at the top of almost every stylesheet, usually as *, *::before, *::after { box-sizing: border-box; }. Set it once and every sizing calculation afterwards behaves the way your intuition expects — it is one of the highest-value single lines in CSS.

Syntax

/* the near-universal reset */
*, *::before, *::after {
  box-sizing: border-box;
}

Values

The box-sizing property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.

Value	Description
`content-box`	Width and height cover only the content; padding and border add on top. The default.
`border-box`	Width and height include the padding and border. The modern, predictable choice.

Example

Live example

<style>
  .demo div { width: 200px; background: #1c7ce9; color: #fff; padding: 16px; border: 4px solid #0f172a; margin-bottom: 10px; font: 600 13px system-ui, sans-serif; }
  .cb { box-sizing: content-box; }
  .bb { box-sizing: border-box; }
</style>
<div class="demo">
  <div class="cb">content-box — actually 248px wide</div>
  <div class="bb">border-box — exactly 200px wide</div>
</div>

Best practices

Set box-sizing: border-box on *, *::before, *::after at the top of your stylesheet — it makes every size behave predictably.
With border-box, a width: 100% element still fits its parent even with padding, instead of overflowing.
Leave the global rule in place rather than toggling it per element; mixing the two box models in one layout invites confusion.
Remember margins are always outside the box either way — box-sizing only affects padding and border.

Frequently asked questions

What does box-sizing: border-box do?

It makes an element's width and height include its padding and border, so the box stays the size you set instead of growing.

Why do developers set box-sizing on everything?

Because the default content-box adds padding and border on top of the width, which makes layouts hard to reason about. border-box on * fixes that everywhere at once.

What is the difference between content-box and border-box?

With content-box, width covers only the content. With border-box, width includes the padding and border, so the element's total size matches the value you set.

Does box-sizing affect margins?

No. Margins always sit outside the box. box-sizing only changes whether padding and border are counted inside the width and height.

box-shadow color

References