CSS box-sizing Property

Last Updated : 08 Oct, 2024

The CSS box-sizing property controls how an element’s size is calculated. When using the border-box model, the padding and border are included in the element’s total width and height, making it easier to manage the layout.

Syntax

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

Property Values

Here is a description of the property values for the box-sizing property:

Property Value	Description
content-box	The element’s width and height are calculated excluding padding and borders. Padding and borders are added outside the specified width and height.
border-box	The element’s width and height include padding and borders within the specified dimensions. This makes layout calculations simpler and more predictable.

Here are the definitions and syntax for both property values:

content-box

The content-box value for box-sizing calculates an element’s width and height, excluding padding and borders, which are added to the specified dimensions.

Syntax:

box-sizing: content-box;

Example: This example illustrates the use of the box-sizing property whose value is set to content-box.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>box-sizing Property</title>
    <style>
        div {
            width: 200px;
            height: 60px;
            padding: 20px;
            border: 2px solid green;
            background: green;
            color: white;
        }

        .content-box {
            box-sizing: content-box;
        }
    </style>
</head>

<body style="text-align: center;">
    <h2>box-sizing: content-box</h2>
    <br>
    <div class="content-box">GeeksforGeeks</div>
</body>

</html>

Output:

content-box

border-box

The border-box value for box-sizing calculates an element’s width and height, including padding and borders within the specified dimensions, making layout design more straightforward and predictable.

Syntax:

box-sizing: border-box;

Example: This example illustrates the use of the box-sizing property whose value is set to border-box.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>box-sizing Property</title>
    <style>
        div {
            width: 200px;
            height: 60px;
            padding: 20px;
            border: 2px solid green;
            background: green;
            color: white;
        }

        .border-box {
            box-sizing: border-box;
        }
    </style>
</head>

<body style="text-align: center;">
    <h2>box-sizing: border-box</h2>
    <br>
    <div class="border-box">GeeksforGeeks</div>
</body>

</html>

Output:

border-box

Supported Browsers

The browser supported by the box-sizing property are listed below:

Note: The box-sizing property is widely supported across all modern browsers. It can be safely used in most web projects, ensuring compatibility across different platforms and devices without the need for special fallbacks.

CSS caption-side Property

Vishal Chaudhary 2

Improve

Article Tags :

CSS box-sizing Property

Syntax

Property Values

content-box

border-box

Supported Browsers

Similar Reads

Thank You!

What kind of Experience do you want to share?