box-sizing

box-sizing chooses which box a declared width or height measures. content-box measures content; border-box includes padding and border. Margin is outside both.

Compare the same declared width

Both boxes declare 180px. With 16px padding and a 4px border on each side, the content-box border area is 220px wide; border-box stays 180px.

<div class="box content">content-box</div>
<div class="box border">border-box</div>

.box {
  width: 180px;
  padding: 16px;
  border: 4px solid #2563eb;
  margin-block: 1rem;
}
.content {
  box-sizing: content-box;
}
.border {
  box-sizing: border-box;
}

A predictable form field

Use border-box when a full-width field must include its own padding. The explicit label remains associated with the input.

<div class="field">
  <label for="name">Name</label
  ><input id="name" name="name" autocomplete="name" />
</div>

input {
  box-sizing: border-box;
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #64748b;
}
.field {
  max-width: 20rem;
}

Defaults and common traps

The initial value is content-box and the property is not inherited. Browser styles use border-box for some controls and tables, so inspect computed styles rather than assuming every element shares the initial value.

Setting it only on html does not change descendants automatically. A project-wide rule can use *, *::before, *::after { box-sizing: border-box; }, or an explicit inheritance pattern. Padding and border cannot create a negative content size, so a very small border-box declaration still has a minimum physical size.

Box sizing alone does not prevent layout shifts or reserve unloaded media space. Use accurate dimensions and test text growth. Learn padding, border, and width next.

Sources and browser support

MDN: box-sizing describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.