Syllabus

CSS box-sizing: content-box vs border-box

Badar KhalilUpdated September 30, 2026 5 min read

CSS box-sizing: content-box vs border-box Explained

The CSS box-sizing property decides what the width and height of an element actually measure. It is a tiny property with a huge effect: it is the reason a width: 100% element sometimes overflows its parent, and the reason almost every modern stylesheet starts with a box-sizing: border-box reset.

What You Will Learn

What content-box and border-box mean, with exact numbers
How the content area shrinks in border-box mode
The universal reset and the inherit pattern
Which form elements already use border-box by default
Using box-sizing with percentages, calc() and min-height
How to read sizes in JavaScript: offsetWidth, clientWidth, getBoundingClientRect()

The Two Values

box-sizing: content-box (initial value): width and height set the size of the content box only. Padding and border are added outside it.
box-sizing: border-box: width and height include content + padding + border. Margin is still outside.

Numbers Side by Side

Take an element with width: 300px; padding: 20px; border: 5px solid;.

content-box: content = 300px, total width = 300 + 40 + 10 = 350px
border-box : total width = 300px, content = 300 - 40 - 10 = 250px

In border-box mode the browser keeps the outer size you asked for and shrinks the content area to make room. If padding and border become larger than the declared width, the content width is clamped to 0 and the box grows to fit them.

Why border-box Makes Layouts Predictable

width: 100% plus padding no longer overflows the parent.
Two columns of width: 50% with padding and border still fit on one row.
Changing padding or border in a component does not change its outer size, so it does not push neighbours around.
Design tools such as Figma measure boxes in the border-box way, so your CSS matches the design numbers directly.

The Universal Reset

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

Including the pseudo-elements ::before and ::after matters, because the plain * selector does not match them.

The Inherit Pattern

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

Here every element inherits from the root. A third-party widget that needs content-box can opt out with .widget { box-sizing: content-box; } and all its children inherit that choice automatically. This is useful when embedding old plugins.

Elements That Default to border-box

Browsers already style several form controls with border-box, for example input[type=button], input[type=reset], input[type=submit], button, select and meter/progress in most engines. Text inputs and textareas usually still default to content-box, which is why a width: 100% input often overflows its form until the reset is applied.

box-sizing with Percentages and calc()

Percentage widths are always resolved against the containing block width. With border-box, the resulting number already includes padding and border.
In content-box mode you can write width: calc(100% - 2 * 20px - 2 * 5px) to compensate, but border-box removes the need for this.
min-width, max-width, min-height and max-height follow the same box-sizing value as width and height.

What About padding-box?

An older draft value padding-box existed in Firefox but was removed. Today only content-box and border-box are supported, so do not use padding-box.

Reading Sizes in JavaScript

offsetWidth / offsetHeight: border box size (content + padding + border, plus scrollbar). Rounded to integers.
clientWidth / clientHeight: padding box size (content + padding, excluding border and scrollbar).
getBoundingClientRect(): border box size as decimals, and affected by transforms.
getComputedStyle(el).width: returns the value in the units of the current box-sizing. In border-box mode it includes padding and border.

Common Mistakes

Applying the reset only to div or body and forgetting inputs and pseudo-elements.
Mixing border-box and content-box components and then wondering why widths do not add up.
Assuming margin is included in border-box. It never is.
Setting padding bigger than the declared width in border-box mode and being surprised the box grows.

Best Practices

Put the border-box reset at the very top of your global stylesheet.
Use the inherit pattern when you must embed third-party components.
Verify real sizes in DevTools instead of guessing.

Frequently Asked Questions

What is the default value of box-sizing?

The default is content-box for most elements.

Does border-box include margin?

No. Margin always stays outside the box, in every mode.

Is box-sizing inherited?

No, it is not inherited by default. That is why the reset uses the universal selector, or box-sizing: inherit explicitly.

Does border-box hurt performance?

No. The cost difference is negligible, and it is the default choice of Tailwind CSS, Bootstrap and most modern frameworks.

Key Takeaways

content-box: width = content only. border-box: width = content + padding + border.
Use *, *::before, *::after { box-sizing: border-box; } in every project.
The property is not inherited, so set it on all elements or use the inherit pattern.
Margin is never part of the box-sizing calculation.

Try it Yourself HTML

<style>
.a, .b { width: 300px; padding: 20px; border: 5px solid #2c3e50; margin-bottom: 16px; background: #ecf0f1; }
.a { box-sizing: content-box; }
.b { box-sizing: border-box; }
</style>
<div class='a'>content-box: total width 350px</div>
<div class='b'>border-box: total width 300px</div>

Output

Press Run to execute.

Try it Yourself CSS

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

Output

Press Run to execute.

Try it Yourself CSS

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

/* A legacy widget can opt out locally */
.legacy-widget { box-sizing: content-box; }

Output

Press Run to execute.

Try it Yourself HTML

<style>
.parent { width: 400px; background: #eee; padding: 10px; }
input { width: 100%; padding: 12px; border: 3px solid #3498db; margin-bottom: 10px; }
.cb { box-sizing: content-box; }
.bb { box-sizing: border-box; }
</style>
<div class='parent'>
  <input class='cb' placeholder='content-box: overflows the parent'>
  <input class='bb' placeholder='border-box: fits exactly'>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
.col { float: left; width: 50%; padding: 20px; border: 2px solid #8e44ad; background: #f5eef8; box-sizing: border-box; }
.clearfix::after { content: ''; display: block; clear: both; }
</style>
<div class='clearfix'>
  <div class='col'>Column 1 (50%)</div>
  <div class='col'>Column 2 (50%)</div>
</div>

Output

Press Run to execute.

Try it Yourself JAVASCRIPT

const el = document.createElement('div');
el.style.cssText = 'width:300px;height:100px;padding:20px;border:5px solid black;box-sizing:content-box;';
document.body.appendChild(el);
console.log('offsetWidth  (border box):', el.offsetWidth);
console.log('clientWidth  (padding box):', el.clientWidth);
console.log('rect.width   (border box):', el.getBoundingClientRect().width);
el.style.boxSizing = 'border-box';
console.log('--- after border-box ---');
console.log('offsetWidth:', el.offsetWidth);
console.log('clientWidth:', el.clientWidth);
console.log('computed width:', getComputedStyle(el).width);
el.remove();

Output

Press Run to execute.

Exercise: Apply the Global ResetHTML

The two boxes below are both width: 250px with 20px padding and a 5px border, but they render at different total widths. Add one CSS rule that uses the universal selector (including pseudo-elements) so that every element uses border-box and both boxes are exactly 250px wide.

Try it Yourself HTML

<style>
.box { width: 250px; padding: 20px; border: 5px solid #333; background: #fef9e7; margin-bottom: 10px; }
.big { font-size: 20px; }
</style>
<div class='box'>Box one</div>
<div class='box big'>Box two</div>

Output

Press Run to execute.

Show expected output

Both boxes are exactly 250px wide in total.

This is a self-check — compare your result with the expected output above.

Exercise: Content Width CalculatorJAVASCRIPT

Write a function contentWidth(width, padding, border, boxSizing) that returns the width of the content area. Padding and border are per side. For content-box return width. For border-box return width minus padding and border on both sides, but never less than 0.

Try it Yourself JAVASCRIPT

function contentWidth(width, padding, border, boxSizing) {
  // TODO: implement
}

console.log(contentWidth(300, 20, 5, 'content-box'));
console.log(contentWidth(300, 20, 5, 'border-box'));
console.log(contentWidth(40, 30, 5, 'border-box'));

Output

Press Run to execute.

Show expected output

300
250
0

This is a self-check — compare your result with the expected output above.

Was this page helpful?