LAST UPDATED: JUNE 19, 2021
CSS box-sizing Property
CSS box-sizing property is used to set the total height and width of an element. The width and height assigned by you are applied only to the content box of the element by default in the CSS box model. If any element is having any border or padding, then this is added to the height and width to get the size of the box which is rendered on the screen. This means that while you set any height and width, you need to adjust the value specified by you to allow any border or padding to get added.
Syntax for box-sizing Property
Following is the syntax for the box-sizing property.
box-sizing: content-box|border-box|initial|inherit;
Example: CSS box-sizing Property
Here in the example below, we are using the box-sizing property with different box sizes (height and width), borders, and their different values. In this case, we have given the box-sizing value as content-box and border-box. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<html>
<head>
<title>Box-sizing property in CSS</title>
<style type="text/css">
div {
width: 160px;
height: 80px;
padding: 20px;
border: 8px solid red;
background: gray;
}
.content-box {
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</div>
</body>
</html>
Output:
Example 2: CSS box-sizing Property
Here in the example below, we are using the box-sizing property with different box sizes (height and width), borders and their different values. In this case, we have given the box-sizing value as 'border-box' with a width of 100 %. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<html>
<head>
<title>Box-sizing property in CSS</title>
<style type="text/css">
div {
width: 160px;
height: 80px;
padding: 20px;
border: 8px solid red;
background: gray;
}
.content-box {
box-sizing: border-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;
}
</style>
</head>
<body>
<div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</div>
</body>
</html>
Output:
Live Example
Here in this live example, you can test the code and execute the example using different values or even edit the code example.
Browser Compatibility
There are many browsers which do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of the Browser |
Background-size |
Contain and cover |
| Chrome |
10 |
10 |
| Edge |
12 |
12 |
| Firefox |
29 |
29 |
| Internet Explorer |
8 |
8 |
| Opera |
7 |
7 |
| Safari |
5.1 |
5.1 |
| Webview Android |
4 |
4 |
| Chrome Android |
18 |
18 |
| Firefox Android |
29 |
29 |
| Opera Android |
14 |
14 |
| IOS Safari |
6 |
6 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion-
The initial value for the box-sizing property in CSS is current box. This property is applicable to all elements which accept height or width. It is not an inherited property. The computed value for this property is the as specified one. The animation type for this property is discrete.
