Skip to content
Related Articles
Open in App
Not now

Related Articles

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

Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 30 Sep, 2021
Improve Article
Save Article

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:

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
Related Articles

Start Your Coding Journey Now!