CSS | box-sizing Property


The box-sizing CSS property 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.

The box-sizing property defines how the width and height of an element are calculated: should they include padding and borders, or not.

CSS Syntax

box-sizing: content-box|border-box|initial|inherit;
Property Values -
    content-box: This is the default value of box-sizing property. In this mode the width and height properties includes only the content. Border and padding are not included in it i.e if we set an element’s width to 200 pixels, then the element’s content box will be 200 pixels wide, and the width of any border or padding will be added to the final rendered width.

Example -