What is the CSS box-sizing property?

The box-sizing property controls what is included when calculating the width and height of an element. With the default box-sizing: content-box, width and height apply only to the content area — adding padding and border increases the total element size beyond what you set. With box-sizing: border-box, the specified width and height include padding and border, so the element never grows beyond the set dimensions. This makes layout math predictable. It is standard practice to apply *, *::before, *::after { box-sizing: border-box; } globally in your CSS reset so all elements behave consistently.