Border box sizing in CSS

The stylesheets of most modern websites include a rule instructing the browser to use border box sizing for all elements and generated content:

1
2
3
4
5

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

CSS defaults to content box sizing, where sizing properties (such as width and height) set the dimensions of the element’s content box, which excludes padding and borders.

The content box model reflects how we think about dimensions in the physical world, by working from the inside outwards: we expect a half-litre water bottle to be able to hold half a litre of water, while the volume of the bottle itself will be larger and depend on the thickness of the bottle’s walls.

In contrast, when designing a website we usually think about dimensions from the outside inwards, starting with the viewport: we expect two elements with widths of 50% to fit next to each other, and two elements with widths of 100 pixels to fit in a container with a width of 200 pixels.

This can be achieved by using border box sizing, where sizing properties set the dimensions of the element’s border box, which includes padding and borders.