Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

What is the use of box-sizing property in CSS ?

  • Last Updated : 30 Sep, 2021

The box-sizing property defines how the width and height of an element should be visible to the user i.e. border and padding are to be included or not.

Syntax:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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

Property Values:

  • content-box (default value)
  • border-box: It tells the browser that the values specified for an element’s width and height will include content, padding and borders. This typically makes it much easier to size elements. The box-sizing: border-box is the default styling that browsers use for the <table>, <select>,  and <button> elements. For example – If you set an element’s width to 200 and height to 100 pixels, that 200 and 100 pixels will include any border or padding that you have added, and the content box will shrink to absorb that extra width and height.

Syntax: 



box-sizing: border-box;

 

Dimensions of the element are calculated as:

width = border + padding + width of the content  
height = border + padding + height of the content

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>box-sizing Property</title>
  
    <style>
        div {
            width: 200px;
            height: 100px;
            padding: 20px;
            border: 2px solid orange;
            background: green;
            color: white;
            display: inline-block
        }
          
        .box {
            box-sizing: border-box;
        }
    </style>
</head>
  
<body style="text-align:center;">
    <h2>{box-sizing: border-box;}</h2>
    <br>
    <div class="box">GeeksforGeeks</div>
</body>
  
</html>

Output:

The following figure illustrates the {box-sizing: border-box:} for the above example.

Browser Support: The browser that fully supports box-sizing property are listed below –

  • Google Chrome 10.0 4.0 -webkit-
  • Internet Explorer 8.0
  • Firefox 29.0 2.0 -moz-
  • Opera 9.5
  • Apple Safari 5.1 3.2 -webkit-



My Personal Notes arrow_drop_up
Recommended Articles
Page :