 CSS border box

The CSS border box is the rectangle bounded by the outer border edges in the CSS box model. It includes the content area, padding and borders, while excluding margins.^[ref]

For a simple unfragmented box, let the CSS content box be $120$ by $40$ CSS pixels, padding be $8$ pixels on every side, and borders be $2$ pixels on every side. The border dimensions areAdding six-pixel left and right margins would give a CSS margin box width of $152$, without changing the $140$-pixel CSS border box width.

The sizing edge matters when reversing this calculation. With box-sizing: border-box; width: 140px and the same padding and borders, the content width is $120$ pixels. With content-box sizing, a declaration width: 140px would instead produce a $160$-pixel CSS border box width, assuming no other constraint.

A CSS border box is a layout region, not a claim that every point inside it is opaque or that nothing paints outside it. Border style and color affect appearance, and CSS overflow concerns content extending beyond a box. Distinguishing geometry from painting avoids treating a screenshot's visible ink as a complete measurement of layout size.