CSS box-sizing Property

The box-sizing property in CSS specifies how the user should calculate the total width and height of an element, including whether or not padding and borders are to be included.

Syntax

box-sizing: content-box | border-box | initial | inherit;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .ex1 {
        box-sizing: content-box;
        width: 300px;
        height: 100px;
        padding: 30px;
        border: 1px solid #00ab55;
    }

    .ex2 {
        box-sizing: border-box;
        width: 300px;
        height: 100px;
        padding: 30px;
        border: 1px solid #00ab55;
    }
</style>
</head>
<body>

<div class="ex1">box-sizing: content-box - Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<br><br>
<div class="ex2">box-sizing: border-box - Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

</body>
</html>

Preview

Property Values

Value	Description
content-box	Default. Only the content is included in the width and height properties (as well as the min/max values). Padding and a border are not included.
border-box	The width and height properties (as well as the min/max values) include content, padding, and a border.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
box-sizing	10.0 4.0 -webkit-	29.0 2.0 -moz-	5.1 3.2 -webkit-	8.0	9.5

box-shadow

break-after

CSS box-sizing Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us