CSS box-sizing Property

The box-sizing property determines how the browser calculates the total width and height of an element, specifically whether padding and borders are included.

selector { box-sizing: content-box | border-box; }
content-box The default value where width and height properties include only the content, not padding or borders.
border-box The width and height properties include the content, padding, and border within the specified dimensions.

Code Examples

A basic comparison showing how border-box keeps an element at its defined width while content-box expands it.

<div style="box-sizing: content-box; width: 300px; padding: 20px; border: 5px solid #333333; background: #cccccc;">This box is actually 350px wide.</div>
<div style="box-sizing: border-box; width: 300px; padding: 20px; border: 5px solid #333333; background: #eeeeee; margin-top: 10px;">This box is exactly 300px wide.</div>

An advanced implementation using JavaScript to toggle box-sizing dynamically, demonstrating how content-box can cause a 100% width element to overflow its parent.

<div id="ui_box" style="box-sizing: border-box; width: 100%; padding: 30px; border: 10px solid #000000; background: #f0f0f0;">
  <p>Total width is locked at 100%.</p>
  <button onclick="toggleSizing()">Toggle box-sizing</button>
</div>

<script>
function toggleSizing() {
  const el = document.getElementById("ui_box");
  const isBorder = el.style.boxSizing === "border-box";
  el.style.boxSizing = isBorder ? "content-box" : "border-box";
  el.style.borderColor = isBorder ? "#ff0000" : "#000000";
  console.log("Current sizing: " + el.style.boxSizing);
}
</script>

Pro Tip

To set border-box globally while ensuring all elements and pseudo-elements inherit it properly, use this snippet: html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; }. This approach is superior to just selecting * because it allows you to easily override the behavior for a specific component and have all its children respect that change automatically.

Deep Dive

Think of content-box like buying a picture frame based only on the photo size; the wood and matting make the final product take up more wall space than you planned. Border-box is like buying a frame based on the total wall space you have; the photo, matting, and wood must all fit inside that specific footprint. In technical terms, the default content-box adds padding and borders on top of your width. If you set a box to 200px wide with 20px padding, it actually sits 240px wide on the screen. Switching to border-box tells the browser to shrink the content area so that the total width, including padding and borders, remains exactly 200px. This makes layout math much more intuitive, especially when using percentages.

Best Practices

The most effective way to use this is to apply border-box to every element on your page using the universal selector. This creates a predictable environment where a 50% width element actually takes up half the container, even if you add borders or padding later. Most modern CSS resets and frameworks adopt this as a standard practice because it eliminates the need to manually subtract pixels from your width calculations.

Common Pitfalls

The most frequent mistake is assuming box-sizing includes margins. It does not. Margins always sit outside the element and will still add to the total space an element occupies relative to its neighbors. Another trap is when developers mix third-party widgets into a site where they have globally set border-box; if that widget was designed for content-box, its layout might look broken or squashed.

Accessibility

While this property is primarily for layout logic, it impacts accessibility by ensuring containers remain stable. If a layout breaks because of content-box overflows, text might become clipped or hidden, making the site unusable for people using screen magnifiers or high-contrast modes. Using border-box keeps your layout structure intact across different zoom levels.

Dev Data Table: box-sizing property

default content-box
animatable no
inherited no
experimental no
year_intro 2002
year_standard 2011
js_syntax_1 element.style.boxSizing = "border-box";
js_syntax_2 element.style.setProperty("box-sizing", "border-box");
js_note When using dot notation in JavaScript, the property is camelCased as boxSizing.
browsers { "Chrome": 10, "Edge": 12, "Firefox": 29, "Safari": 5.1, "Opera": 7, "Chrome Android": 18, "Safari on iOS": 5, "Samsung Internet": 1, "Opera Mobile": 12 }
results render here...