CSS box-sizing

❮ Previous Next ❯

Demo of the different values of the box-sizing property.

To stop the demo, click one of the possible values.

box-sizing: border-box;
box-sizing: content-box;

Below is a 200px DIV with 10px padding and a 30px border. If box-sizing is "border-box", the total width of the DIV element is always 200px, but if box-sizing is "content-box", the total width is 200px plus padding and border = 280px.

See what different box-sizing values does for an element.

Below is a 200px DIV with 10px padding and a 30px border. If box-sizing is "border-box", the total width of the DIV element is always 200px, but if box-sizing is "content-box", the total width is 200px plus padding and border = 280px.

See what different box-sizing values does for an element.

Play more with the code in our Tryit yourself editor: Try it Yourself ❯