What does box-sizing: border-box do?

box-sizing: border-box makes an element's width and height include its padding and border, so the number you set is the box's real on-screen size.

By default (content-box), width measures only the content, and any padding and border are added on top — which makes layouts surprisingly hard to size:

.box {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
}
/* Real rendered width = 200 + 20+20 + 5+5 = 250px */

Switch to border-box and the padding and border are absorbed into the declared width instead:

.box {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 5px solid black;
}
/* Real rendered width = exactly 200px */

Because the second behaviour matches how people intuitively think about sizes, it is near-universal to set it on everything up front:

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

Easier maths, more predictable layouts, and it is what essentially every CSS framework does — which is why this one-liner is one of the most common things in any stylesheet's reset.

Go deeper:

• box-sizing (MDN) — reference for content-box vs border-box, with the exact width maths for each.