box-sizing

div.test { box-sizing: content-box;}
div.test1 { box-sizing: border-box;}

The div elements in the samples below have 'width: 300px', 'height: 300px', 'padding: 10px', and 'border: solid 10px red' specified.

<div style="box-sizing: content-box; width: 300px; height: 300px; border: solid 10px red; padding: 10px; margin: 0 auto;">This is a div element with <span style="color: #f00">box-sizing: content-box</span>. The size specified by 'width' and 'height' does not include padding or border, so the total element size becomes 340px wide and 340px tall.</div>

<div style="box-sizing: border-box; width: 300px; height: 300px; border: solid 10px red; padding: 10px; margin: 0 auto;">This is a div element with <span style="color: #f00">box-sizing: border-box</span>. The size specified by 'width' and 'height' includes padding and border but not margin, so the element size is exactly 300px wide and 300px tall.</div>

Desktop

Chrome

10+ ○

9 △

8 △

7 △

6 △

5 △

4 △

3 △

2 △

↑ Requires prefix '-webkit-'

Firefox

29+ ○

28 △

27 △

26 △

25 △

24 △

23 △

22 △

21 △

↑ Requires prefix '-moz-'

Safari

5.1+ ○

4 △

3 △

↑ Requires prefix '-webkit-'

2 and earlier ×

Edge

12+ ○

Supported in all versions

IE

11 ○

10 ○

9 ○

8 ○

7 ×

6 ×

Opera

7+ ○

6 and earlier ×

Mobile

iOS Safari

6+ ○

5 △

4 △

3 △

2 △

1 △

↑ Requires prefix '-webkit-'

Android Browser

4+ ○

2 △

↑ Requires prefix '-webkit-'

Chrome Android

Latest ○

Same support as desktop

Firefox Android

Latest ○

Same support as desktop

※ Version data based on MDN / Can I Use.

Changes the calculation method for the box model (element size).

When 'content-box' is specified, the size defined by the 'width' and 'height' properties does not include padding, border, or margin. This 'content-box' is the initial value.

<div style="box-sizing: content-box; width: 300px; height: 300px; border: solid 10px red; padding: 10px; margin: 0 auto;">This is a div element with <span style="color: #f00">box-sizing: content-box</span>. Since the 10px padding and 10px border are added to the size specified by 'width' and 'height', the element becomes 340px wide and 340px tall.</div>

When 'border-box' is specified, the size defined by the 'width' and 'height' properties includes padding and border. Margin is not included.

<div style="box-sizing: border-box; width: 300px; height: 300px; border: solid 10px red; padding: 10px; margin: 0 auto;">This is a div element with <span style="color: #f00">box-sizing: border-box</span>. Since the 10px padding and 10px border are included in the size specified by 'width' and 'height', the element size is exactly 300px wide and 300px tall as specified.</div>

Regarding vendor prefixes, almost all modern browsers now support this property without any vendor prefix, so they are generally not needed. However, some older Android stock browsers may require vendor prefixes, in which case you can write it as follows.

div.test {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}