CSS Box Sizing border box vs content box

content-box vs border-box

box-sizing decides whether width and height describe only the content area or the complete visible box. This small property has a big effect because padding and borders are used everywhere in real layouts.

For beginners, the easiest rule is this: border-box makes CSS dimensions behave closer to how people expect. If a card is set to width: 300px, it remains 300px even after padding and border are added. content-box is still useful to understand because it is the browser default and explains many "why did this become wider?" bugs.

The box-sizing property changes how the browser calculates an element's final size. This is one of the most useful CSS properties for predictable layouts because it decides whether padding and border are added on top of the width, or included inside it.

Value	How Width/Height Work	Result
content-box	Width applies only to content	Padding and border make the element bigger
border-box	Width includes content, padding, and border	Size stays easier to control

Why border-box Is Popular

Most modern projects switch every element to border-box because it makes layouts simpler. A card with width: 300px actually stays 300 pixels wide even if you add padding and borders.

Comparing the two sizing models

.card-a {
    box-sizing: content-box;
    width: 300px;
    padding: 20px;
    border: 5px solid #2563eb;
}

/* Final rendered width: 350px */

.card-b {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 5px solid #2563eb;
}

/* Final rendered width: still 300px */

Global Reset Pattern

A universal box-sizing reset changes how width and height are calculated for every element. With <code>border-box</code>, padding and border stay inside the declared size instead of pushing the box wider than expected.

When to Use Each Value

Use one sizing model consistently across a project. Mixing content-box and border-box is allowed, but it often creates hidden math. For example, two columns may both say width: 50%, yet the content-box column can overflow because its padding is added after the 50% calculation.

Use border-box for nearly all layout containers, cards, grids, and forms.
Use content-box only when you specifically want padding and borders to add extra size.
Keep your entire project consistent to avoid confusing mixed behavior.

Two equal columns that do not overflow

.layout {
    display: flex;
}

.column {
    box-sizing: border-box;
    width: 50%;
    padding: 24px;
    border: 1px solid #d0d7de;
}

/* Each column stays at 50%, including its padding and border. */