Content-box vs Border-box

Content-box: The Default Behavior

By default, the CSS width and height properties size only the content area. Padding and border are added on top, making the final rendered box larger than the width you set.

.box {
  box-sizing: content-box; /* default */
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}
/* Rendered width = 200 + 20+20 (padding) + 5+5 (border) = 250px */

Border-box: The Practical Alternative

box-sizing: border-box changes the meaning of width so that it includes padding and border. The content area shrinks to make room for them, and the box stays exactly the width you declared.

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}
/* Rendered width stays 200px; content area shrinks instead */

The Common Global Reset

Because border-box behaves more predictably for layout, most projects apply it globally near the top of their stylesheet:

*, *::before, *::after {
  box-sizing: border-box;
}

Why This Distinction Matters

Content-box is the reason a box can silently grow past its intended width once padding or a border is added, breaking layouts that assumed a fixed size. Switching to border-box removes that surprise and is considered a best practice on almost every modern project.