CSS Border Box

In CSS, there are various properties that you can apply to your web page to make it look appealing. Each CSS property has its value that describes how a web page element should look. Before knowing about CSS Border Box, let us know about the CSS Box Model.

Understanding the CSS Box Model

To understand the border box properly, we must know about the CSS box model. The CSS box model plays an important role in web design, which is used to determine the size and arrangement of elements on a webpage.

The CSS box model contains content, margins, borders, and padding. The actual box model will look like you can see below:

One thing that could be improved in the box model is the relationship between width and its border & padding and the relationship between height and its border & padding.

When you specify the width and height of an element, the values are applied to the content box by default. The content box is the actual space that holds the content of the element, which could be images, text, etc. When you apply padding and border to an element, it increases the size of the element, which can lead to unexpected results.

If you set a width of 100px and a padding of 25px, the element will actually display as 150px wide, which means that the element has increased in size.

Border Box

A border-box value is used to contain padding and a border within the overall width and height of an element.

Let us see how the final size of an element is calculated with the help of an example:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example</title>
    <style>
    .border-box {
          width: 100px;
	height: 50px;
	padding: 25px;
	border: 2px solid red;
}
   </style>
</head>
<body>
    <div class="border-box">Some text</div>
</body>
</html>

In the above code, there is a div element with the class "border-box". This element is specified with 100px width, 50px height, 25px padding, and 2px border.

Output:

Actual Height= Height + Top Border + Bottom Border + Top Padding + Bottom Padding

= 50px + 2px + 2px + 25px + 25px

=104px

Actual Width= Width + Right Border + Left Border + Right Padding + Left Padding

= 100px + 2px + 2px + 25px + 25px

=154px

After adding padding and border, the actual height becomes 106px, and the actual width becomes 156px, as you can see below.

To avoid unexpected results like an increase in the width and the height of the element, CSS offers a border-box value that is given to the box-sizing property.

Without Using the Box-sizing Property with the Border-box Value

The following example displays Element1, Element2, and Element3 without the box-sizing property.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Without using Border-Box</title>
    <style>
    .Element1 {
        height: 100px;
        width: 250px;
    }  
    .Element2 {
        height: 100px;
        width: 250px;
        border: 3px solid blueviolet;
    } 
    .Element3 {
        height: 100px;
        width: 250px;
        border: 3px solid coral;
        padding: 30px;
    }        
    </style>
</head>
<body>
    <h1>Without using border-box</h1>
    <div class="Element1">It is an element whose width and height are specified. The size of the element is 250 px wide and 100px long.</div> <br>
    <div class="Element2">It is an element whose width, height, and border are specified. When a border size is added to Element2, the size of the element becomes larger.</div> <br>
    <div class="Element3">It is an element whose width, height, border, and padding are specified. When padding is added, the size of the element becomes larger than Element2.</div>
</body>
</html>

Explanation:

In the above code, we are not using the box-sizing property. We have created three div elements with different classes like Element1, Element2, and Element3.

Element1 is styled with the following CSS property:

Total height = 100px

Total width = 250px

The actual height and width of Element1 are 100px and 250px.

Element2 is styled with the following CSS property:

Total height = 100px (height) + 3px (top border) + 3px (bottom border) = 106px

Total width = 250px (height) + 3px (right border) + 3px (left border) = 256px

After adding the border to Element2, the size of the element increases.

Element3 is styled with the following CSS property:

Total height = 100px (height) + 3px (top border) + 3px (bottom border) + 30px (top padding) + 30px (bottom padding) = 166px

Total width = 250px (height) + 3px (right border) + 3px (left border) + 30px (right padding) + 30px (left padding) = 316px

After adding a border and padding to Element3, the size of the element becomes larger than the size of Element2.

Output:

As you may observe, every element is displayed with a different width and height, even though each element is assigned the same width and height.

The layout of Element1, Element2, and Element3 will look like you can see below. Each element can be viewed in different sizes.

Using the Box-sizing Property with the Border-box Value

The following example displays Element1, Element2, and Element3 using the box-sizing property.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Using Border-Box</title>
    <style>
    .Element1 {
        height: 150px;
        width: 300px;
        box-sizing: border-box;
    } 
    .Element2 {
        height: 150px;
        width: 300px;
        border: 5px solid firebrick;
        box-sizing: border-box;
    } 
    .Element3 {
        height: 150px;
        width: 300px;
        border: 5px solid darkmagenta;
        padding: 15px;
        box-sizing: border-box;
    }        
    </style>
</head>
<body>
    <h1>Using border-box</h1>
    <div class="Element1">It is an element whose width and height are specified with the box-sizing property whose value is border-box. The size of the element is 300 px wide and 150px long.</div> <br>
    <div class="Element2">It is an element whose width, height, and border are specified with the box-sizing property whose value is border-box. The size of Element2 remains the same.</div> <br>
    <div class="Element3">It is an element whose width, height, border, and padding are specified with the box-sizing property whose value is border-box. The size of Element3 remains the same.</div>
</body>
</html>

Explanation:

In the above code, we are using the box-sizing property. We have created three div elements with different classes like Element1, Element2, and Element3.

Element1 is styled with the following CSS property:

Total height = 150px

Total width = 300px

The actual height and width of Element1 are 150px and 300px.

Element2 is styled with the following CSS property:

Total height = 150px

Total width = 300px

Even after adding a border to Element2, the width and height will remain the same because of the use of the box-sizing property, whose value is border-box.

Element3 is styled with the following CSS property:

Total height = 150px

Total width = 300px

Even after adding a border and padding to Element3, the width and height will remain the same because of the use of the box-sizing property, whose value is border-box.

Output:

As you can see, each element has the same width and height. Even after adding border and padding to the elements, none of the elements are affected. A border box contains padding and a border within the full width and height of the element.

The layout of Element1, Element2, and Element3 will appear as shown below. The size of each element remains the same. When border and padding are added, they are adjusted according to the width and height of the element.

Conclusion

In this article, you have understood the CSS border-box, which is used to keep the border and padding within the whole height and width of the element. With the help of examples, you have learned how elements behave with and without a border box.

Next TopicCSS Border Color

← prev next →