Borderbox different from contentbox (original) (raw)

Border-box different from content-box

Last Updated : 5 Jun, 2026

(Cascading Style Sheets) is a stylesheet language used to design a webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. It allows you to apply styles on web pages. More importantly, it enables you to do this independent of the HTML that makes up each web page.

The box-sizing property in CSS controls how an element's width and height are calculated. The two main values, content-box and border-box, determine whether padding and borders are included in the specified dimensions.

**content-box: Width and height apply only to the content area.
**border-box: Width and height include the content, padding, and border.

**Example:

HTML `

<head>
    <style>
        .box {
                width: 300px;
                height: 200px;
                padding: 15px;
                border: 10px solid black;
                box-sizing: content-box;
                background: green;
                display: inline-block;
            } 
    </style>
</head>

<body>
    <h1 class="box">GeeksForGeeks</h1>
</body>

BOX	CSS BOX MODEL

In border-box, the specified width includes the content, padding, and border, whereas in content-box, the specified width applies only to the content area.

**Syntax: box-sizing: content-box;

**border-box: In this value, not only width and height properties are included but you will find padding and border inside of the box for example .box {width: 200px; border: 10px solid black;} renders a box that is 200px wide.

**Example:

HTML `

GeeksForGeeks

BOX	CSS BOX MODEL

**Note: With content-box, the content size stays fixed and the total (border-box) size increases as padding and borders grow. With border-box, the total size stays fixed and the content area shrinks as padding and borders increase.

**Syntax: box-sizing: border-box;

**Example: Difference between the width when content-box and border-box properties are applied.

HTML `

GeeksForGeeks

<style>
    h1 {
        color: green;
        text-align: center;
    }
    div {
        width: 200px;
        height: 200px;
        padding: 15px;
        border: 10px solid black;
        background: green;
        display: inline-block;
    }
    .content-box {
        box-sizing: content-box;
    }
    .border-box {
        box-sizing: border-box;
    }
</style>

Borderbox different from contentbox (original) (raw)