= CSS border box
{c}
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.<Box model in CSS 2.2 by W3C>[§8.1, border edge and border box]{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 are
$$
W_{\rm border}=120+2(8)+2(2)=140,\qquad
H_{\rm border}=40+2(8)+2(2)=60.
$$
Adding 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.
Back to article page
