The box-sizing property sets how an element’s width and height are calculated: content only (content-box), or content plus padding and border (border-box).
The initial value is content-box. Margin is never included. Many layouts use border-box so a set width stays the final outer size when padding or border is added.
Not deprecated and not experimental. Baseline widely available. Some form controls already use border-box by default in browsers.
box-sizing: content-box | border-box | initial | inherit;Only two keywords. Pick how width and height count padding and border.
box-sizingDecide whether width is “content only” or “final outer size.”
width (and often height).padding and border as needed.content-box if those extras should grow the box beyond the width.border-box if the width should stay the total size and content should shrink instead.| Mode | Width means | Total size example |
|---|---|---|
content-box | Content area | 160px + padding + border > 160px |
border-box | Content + padding + border | Total stays 160px; content shrinks |
Width, padding, and border stay fixed. Change only box-sizing and watch the outer size.
Same width, padding, and border in each demo. Only box-sizing changes. Use Try It Yourself for a live editor.
Padding and border are added outside the width.
<style>
.box {
width: 160px;
padding: 20px;
border: 8px solid #1d4ed8;
box-sizing: content-box;
}
</style>
<div class="box">Content box</div>160px wide.20px on each side adds 40px.8px on each side adds 16px.160 + 40 + 16 = 216px.The same numbers, but the outer width stays 160px.
<style>
.box {
width: 160px;
padding: 20px;
border: 8px solid #1d4ed8;
box-sizing: border-box;
}
</style>
<div class="box">Border box</div>160px wide.160 - 40 - 16 = 104px.width: 100% with padding rarely overflows the parent.Two boxes share width, padding, and border. Only box-sizing differs.
<style>
.box {
width: 160px;
padding: 20px;
border: 8px solid #1d4ed8;
}
.a { box-sizing: content-box; }
.b { box-sizing: border-box; }
</style>
<div class="box a">content-box</div>
<div class="box b">border-box</div>160px, 20px padding, and an 8px border.216px.160px.box-sizing.Remember what is inside the width — and what never is.
box-sizing does not touch margin. Space outside the border always adds to layout separately.
width: 100% + paddingWith content-box, padding can push a 100% child past its parent. border-box usually prevents that.
With border-box, huge padding cannot erase the box. Content size floors at 0.
Browsers often use border-box for certain buttons and inputs. Do not assume every element is content-box.
Many projects set *, *::before, *::after { box-sizing: border-box; } once so sizing stays predictable. Try it in tryit 4.
box-sizing is a browser style property. Node.js, Deno, and Bun do not apply it.
Chrome 10+, Firefox 29+, Safari 5.1+, Edge 12+, Opera 7+, Internet Explorer 8+. Unprefixed in modern browsers.
Bottom line: Safe for production. No prefix is required in current browsers for content-box and border-box.
content-box — extras grow the box.box-sizing.One line: box-sizing chooses whether padding and border sit inside or outside your width.
Control how page, column, or region breaks behave after an element.
8 people found this page helpful