CSS boxsizing Property (original) (raw)

CSS box-sizing Property

Last Updated : 5 Jun, 2026

The box-sizing property in CSS determines how an element's width and height are calculated, including whether padding and borders are counted within the specified dimensions.

• **content-box (default): Width and height apply only to the content area; padding and borders are added outside.
• **border-box: Width and height include the content, padding, and border within the specified dimensions.
• Makes element sizing more predictable and simplifies layout design, especially when using border-box.

**Syntax

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

content-box

The content-box value for box-sizing calculates an element's width and height, excluding padding and borders, which are added to the specified dimensions.

**Syntax:

box-sizing: content-box;

**Example: Illustrates the use of the box-sizing property whose value is set to content-box.

HTML `

<style>
    body {
        text-align: center;
        font-family: Georgia, serif;
    }

    h2 {
        font-size: 28px;
        margin-bottom: 50px;
    }

    .content-box {
        width: 200px;
        height: 60px;
        padding: 20px;
        background: green;
        color: white;
        box-sizing: content-box;
        margin: 0 auto;
        font-size: 22px;
        line-height: 60px;
    }
</style>

box-sizing: content-box

<div class="content-box">
    GeeksforGeeks
</div>

`

border-box

The border-box value for box-sizing calculates an element's width and height, including padding and borders within the specified dimensions, making layout design more straightforward and predictable.

**Syntax:

box-sizing: border-box;

**Example: Illustrates the use of the box-sizing property whose value is set to border-box.

HTML `

<style>
    body {
        text-align: center;
        font-family: Georgia, serif;
    }

    h2 {
        font-size: 28px;
        margin-bottom: 50px;
    }

    .border-box {
        width: 240px;
        height: 100px;
        background: green;
        color: white;
        box-sizing: border-box;
        margin: 0 auto;
        font-size: 22px;
        line-height: 100px;
    }
</style>

box-sizing: border-box

<div class="border-box">
    GeeksforGeeks
</div>

`