What is CSS border box

You've probably come across this universal preset before

To understand border box we have to understand CSS box modelling, in CSS elements are made out of the content box by giving something a width or height we're setting the size of the content box, if you set the width of an element to 100px, then the elements content-box will be 100px wide and the width of any border or padding will be added to the final render. By default, box-sizing is set to content-box. Consider the following piece of code

Edit box-sizing

You'll notice if we add padding and border in our div of class content-box our div becomes wider, this is because the extra pixels from the padding and border are added to the box.

To go around this we set the box-sizing to border-box, the padding and border pixels will be added on the inside, the content box will shrink to absorb that extra width