Codectionary / Developer documentation / CSS

box-sizing

box-sizing controls how an element's total width and height are calculated. The default, content-box, means padding and border are added on top of the declared width, making sizing math confusing. border-box includes padding and border within the declared width instead, which is why nearly every modern CSS reset sets it globally.

Syntax

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

Examples

content-box vs border-box

The same declared width producing different rendered sizes.

/* Demo setup: sizing, structure or neutral surfaces. */
.content-box,.border-box{background:#fef3c7;color:#422006;margin-block:1rem}

.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 */
}
  1. Both examples declare a 200px width, 20px padding and 5px border.
  2. content-box has a 250px outer width; border-box keeps its outer width at 200px.
  3. The preview no longer injects its own box-sizing reset, so the difference is real.
HTML used by this example
<p>Same declared width, different outer sizes:</p><div class="content-box preview-tile">content-box</div><div class="border-box preview-tile">border-box</div>

The Universal Reset

The standard way nearly every project applies border-box globally.

/* Demo setup: sizing, structure or neutral surfaces. */
.content-box,.border-box{width:200px;padding:20px;border:5px solid #b45309;margin-block:1rem}

*, *::before, *::after {
  box-sizing: border-box;
}
  1. Both examples declare a 200px width, 20px padding and 5px border.
  2. The universal rule includes padding and borders inside both declared widths.
  3. The preview no longer injects its own box-sizing reset, so the difference is real.
HTML used by this example
<p>Same declared width, different outer sizes:</p><div class="content-box preview-tile">content-box</div><div class="border-box preview-tile">border-box</div>

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

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading