Open In App
Related Articles

CSS box-sizing Property

Improve Article
Improve
Save Article
Save
Like Article
Like

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

Syntax:

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

Property Values: All the properties are described well in the example below.

content-box: This is the default value of the box-sizing property. In this mode, the width and height properties include only the content. Border and padding are not included in it i.e if we set an element’s width to 200 pixels, then the element’s content box will be 200 pixels wide, and the width of any border or padding will be added to the final rendered width.

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: In this mode, the width and height properties include content, padding, and borders i.e if we set an element’s width to 200 pixels, that 200 pixels will include any border or padding we added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.

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:  

  • Google Chrome 10.0 and above
  • Microsoft Edge 12.0 and above
  • Firefox 29.0 and above
  • Opera 7.0 and above
  • Apple Safari 5.1 and above

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 02 Aug, 2023
Like Article
Save Article
Previous
Next
Similar Reads
Complete Tutorials