CSS box-sizing Property

What You’ll Learn

The box-sizing property controls how an element’s total width and height are calculated. Understanding content-box vs border-box helps you build layouts that behave predictably — especially when padding and borders are involved.

Definition and Usage

The box-sizing CSS property controls how the total width and height of an element are calculated. By default, the width and height apply to the content area only — padding and border are added on top, which can make elements wider than you expect.

The box-sizing property lets you change this behavior to simplify layout calculations and avoid common issues with elements that have padding and borders. It is especially important for responsive web design and front-end layouts.

📝 Syntax

The syntax for box-sizing is simple. It can be applied to any block-level or inline-level element:

selector {
  box-sizing: content-box | border-box;
}

Basic Example

.card {
  box-sizing: border-box;
  width: 100%;
  padding: 1rem;
  border: 1px solid #e2e8f0;
}

Syntax Rules

• The initial value is content-box.
• Only two main keywords: content-box and border-box.
• The property is not inherited by default — set it on each element or use a global reset.
• Margin is never included in either box-sizing mode.
• Works on all elements that accept width and height.

💎 Property Values

The box-sizing property accepts two keyword values that change how width and height are measured.

How Width Is Calculated

Both boxes below have width: 200px, padding: 20px, and border: 5px solid black. Only the box-sizing value differs:

• content-box — Total width = 200px (content) + 40px (padding) + 10px (border) = 250px
• border-box — Total width = 200px (content, padding, and border all fit inside)

This is why columns in a grid sometimes overflow unexpectedly with content-box, and why border-box is popular for full-width layouts.

Examples Gallery

See content-box vs border-box, a global reset, grid columns, and form inputs.

<style>
  .box-content {
    box-sizing: content-box;
    width: 200px;
    padding: 20px;
    border: 5px solid black;
  }

  .box-border {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 5px solid black;
  }
</style>

<div class="box-content">
  Content-box: width is 200px, plus padding and border.
</div>
<div class="box-border">
  Border-box: total width is 200px, including padding and border.
</div>

*,
*::before,
*::after {
  box-sizing: border-box;
}

<style>
  .col {
    box-sizing: border-box;
    width: 50%;
    padding: 1rem;
    border: 1px solid #cbd5e1;
  }

  .row {
    display: flex;
  }
</style>

<div class="row">
  <div class="col">Left</div>
  <div class="col">Right</div>
</div>

<style>
  input[type="text"] {
    box-sizing: border-box;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
  }
</style>

<label for="email">Email</label>
<input type="text" id="email" placeholder="you@example.com">

💡 Best Practices