The border-box and content-box are the two different values of box-sizing property. The box-sizing property in CSS defines how the user should calculate the total width and height of an element i.e. padding and borders, are to be included or not.
Content-box: This is the default value of the box-sizing property. In this mode, the width and height properties include only the content. Border and padding are not included in it i.e. if we set an element’s width to 100 pixels, then the element’s content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width.
Syntax:
box-sizing: content-box;
Border-box: In this mode, the width and height properties include content, padding, and borders i.e. if we set an element’s width to 100 pixels, that 100 pixels will include any border or padding we added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.
Syntax:
box-sizing: border-box;