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;
You'll notice that 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