Method of specifying whether or not an element's borders and padding should be included in size units
Spec | https://www.w3.org/TR/css-sizing/#box-sizing |
---|---|
Status | W3C Working Draft |
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
108 | |||||
107 | 107 | TP | |||
106 | 106 | 16.1 | |||
11 | 105 | 105 | 105 | 16.0 | 91 |
10 | 104 | 104 | 104 | 15.6 | 90 |
9 | 103 | 103 | 103 | 15.5 | 89 |
8 | 102 | 102 | 102 | 15.4 | 88 |
Show all | |||||
7 | 101 | 101 | 101 | 15.2-15.3 | 87 |
6 | 100 | 100 | 100 | 15.1 | 86 |
5.5 | 99 | 99 | 99 | 15 | 85 |
98 | 98 | 98 | 14.1 | 84 | |
97 | 97 | 97 | 14 | 83 | |
96 | 96 | 96 | 13.1 | 82 | |
95 | 95 | 95 | 13 | 81 | |
94 | 94 | 94 | 12.1 | 80 | |
93 | 93 | 93 | 12 | 79 | |
92 | 92 | 92 | 11.1 | 78 | |
91 | 91 | 91 | 11 | 77 | |
90 | 90 | 90 | 10.1 | 76 | |
89 | 89 | 89 | 10 | 75 | |
88 | 88 | 88 | 9.1 | 74 | |
87 | 87 | 87 | 9 | 73 | |
86 | 86 | 86 | 8 | 72 | |
85 | 85 | 85 | 7.1 | 71 | |
84 | 84 | 84 | 7 | 70 | |
83 | 83 | 83 | 6.1 | 69 | |
81 | 82 | 81 | 6 | 68 | |
80 | 81 | 80 | 5.1 | 67 | |
79 | 80 | 79 | 5 (*) | 66 | |
18 | 79 | 78 | 4 (*) | 65 | |
17 | 78 | 77 | 3.2 (*) | 64 | |
16 | 77 | 76 | 3.1 (*) | 63 | |
15 | 76 | 75 | 62 | ||
14 | 75 | 74 | 60 | ||
13 | 74 | 73 | 58 | ||
12 | 73 | 72 | 57 | ||
72 | 71 | 56 | |||
71 | 70 | 55 | |||
70 | 69 | 54 | |||
69 | 68 | 53 | |||
68 | 67 | 52 | |||
67 | 66 | 51 | |||
66 | 65 | 50 | |||
65 | 64 | 49 | |||
64 | 63 | 48 | |||
63 | 62 | 47 | |||
62 | 61 | 46 | |||
61 | 60 | 45 | |||
60 | 59 | 44 | |||
59 | 58 | 43 | |||
58 | 57 | 42 | |||
57 | 56 | 41 | |||
56 | 55 | 40 | |||
55 | 54 | 39 | |||
54 | 53 | 38 | |||
53 | 52 | 37 | |||
52 | 51 | 36 | |||
51 | 50 | 35 | |||
50 | 49 | 34 | |||
49 | 48 | 33 | |||
48 | 47 | 32 | |||
47 | 46 | 31 | |||
46 | 45 | 30 | |||
45 | 44 | 29 | |||
44 | 43 | 28 | |||
43 | 42 | 27 | |||
42 | 41 | 26 | |||
41 | 40 | 25 | |||
40 | 39 | 24 | |||
39 | 38 | 23 | |||
38 | 37 | 22 | |||
37 | 36 | 21 | |||
36 | 35 | 20 | |||
35 | 34 | 19 | |||
34 | 33 | 18 | |||
33 | 32 | 17 | |||
32 | 31 | 16 | |||
31 | 30 | 15 | |||
30 | 29 | 12.1 | |||
29 | 28 | 12 | |||
28 (*) | 27 | 11.6 | |||
27 (*) | 26 | 11.5 | |||
26 (*) | 25 | 11.1 | |||
25 (*) | 24 | 11 | |||
24 (*) | 23 | 10.6 | |||
23 (*) | 22 | 10.5 | |||
22 (*) | 21 | 10.0-10.1 | |||
21 (*) | 20 | 9.5-9.6 | |||
20 (*) | 19 | 9 | |||
19 (*) | 18 | ||||
18 (*) | 17 | ||||
17 (*) | 16 | ||||
16 (*) | 15 | ||||
15 (*) | 14 | ||||
14 (*) | 13 | ||||
13 (*) | 12 | ||||
12 (*) | 11 | ||||
11 (*) | 10 | ||||
10 (*) | 9 (*) | ||||
9 (*) | 8 (*) | ||||
8 (*) | 7 (*) | ||||
7 (*) | 6 (*) | ||||
6 (*) | 5 (*) | ||||
5 (*) | 4 (*) | ||||
4 (*) | |||||
3.6 (*) | |||||
3.5 (*) | |||||
3 (*) | |||||
2 (*) |
Safari on iOS | Opera Mini | Android Browser | Blackberry Browser | Opera Mobile | Android Chrome | Android Firefox | IE Mobile | Android UC Browser | Samsung Internet | QQ Browser | Baidu Browser | KaiOS Browser |
---|---|---|---|---|---|---|---|---|---|---|---|---|
16.1 | ||||||||||||
16.0 | all | 105 | 10 | 64 | 105 | 104 | 11 | 13.4 | 18.0 | 13.1 | 13.18 | 2.5 |
15.6 | 4.4.3-4.4.4 | 7 (*) | 12.1 | 10 | 17.0 | |||||||
15.5 | 4.4 | 12 | 16.0 | |||||||||
15.4 | 4.2-4.3 | 11.5 | 15.0 | |||||||||
Show all | ||||||||||||
15.2-15.3 | 4.1 | 11.1 | 14.0 | |||||||||
15.0-15.1 | 4 | 11 | 13.0 | |||||||||
14.5-14.8 | 3 (*) | 10 | 12.0 | |||||||||
14.0-14.4 | 2.3 (*) | 11.1-11.2 | ||||||||||
13.4-13.7 | 2.2 (*) | 10.1 | ||||||||||
13.3 | 2.1 (*) | 9.2 | ||||||||||
13.2 | 8.2 | |||||||||||
13.0-13.1 | 7.2-7.4 | |||||||||||
12.2-12.5 | 6.2-6.4 | |||||||||||
12.0-12.1 | 5.0-5.4 | |||||||||||
11.3-11.4 | 4 | |||||||||||
11.0-11.2 | ||||||||||||
10.3 | ||||||||||||
10.0-10.2 | ||||||||||||
9.3 | ||||||||||||
9.0-9.2 | ||||||||||||
8.1-8.4 | ||||||||||||
8 | ||||||||||||
7.0-7.1 | ||||||||||||
6.0-6.1 | ||||||||||||
5.0-5.1 | ||||||||||||
4.2-4.3 (*) | ||||||||||||
4.0-4.1 (*) | ||||||||||||
3.2 (*) |
Firefox versions before 57 also supported the padding-box
value for box-sizing
, though this value was been removed from the specification and later versions of the browser.
Android browsers do not calculate correctly the dimensions (width and height) of the HTML select element.
Safari 6.0.x does not use box-sizing on elements with display: table;
IE9 will subtract the width of the scrollbar to the width of the element when set to position: absolute / fixed , overflow: auto / overflow-y: scroll
IE 8 ignores box-sizing: border-box
if min/max-width/height is used.
Chrome has problems selecting options from the select
element when using box-sizing: border-box
and browser zoom level is less than 100%.
In IE8, the min-width property applies to content-box
even if box-sizing
is set to border-box
.
In Chrome, the inherit
value doesn't work on elements inside details
, this could lead to unexpected behaviour when box-sizing: inherit
is used in an universal selector, see https://bugs.chromium.org/p/chromium/issues/detail?id=589475
Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
https://caniuse.com/css3-boxsizing