box-sizing: Content and Border Boxes, Including Small-Size Limits

CSS Reference

box-sizing determines which box width and height describe. Content-box adds padding and borders to the declared content size; border-box includes them inside the declared size. Neither includes margins.

Syntax and value choices

Property	Initial value	Inherited	Main application conditions
`box-sizing`	content-box	No	Boxes accepting width and height

Initial values are not necessarily the values assigned to HTML elements by the browser’s stylesheet. Inspect the actual result in developer tools’ Computed panel.

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

Value or category	Behavior and choice
`content-box`	Outer width is declared width plus horizontal padding and borders.
`border-box`	Declared width normally includes padding and borders.
`margin`	Remains outside either sizing model.
`inherit`	Explicitly inherit; the property is not normally inherited.

For supported values and conditions, see MDN box-sizing.

Run the example and compare results

Save this complete code as css-reference-10630-example.html in UTF-8 and open it in a browser. Keep its demonstration styles in that file rather than pasting them into a site-wide stylesheet.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>box-sizing comparison example</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { width: 200px; padding: 20px; border: 5px solid #006c9c; background: #bfe3ff; }
.target { box-sizing: content-box; }
.reference { box-sizing: border-box; }
</style>
</head>
<body>
<main id="demo">
<h1>box-sizing comparison</h1>
<section class="samples"><div class="a"><p class="label">content-box</p><div class="target">width: 200px</div></div><div class="b"><p class="label">border-box</p><div class="reference">width: 200px</div></div></section>
</main>
</body>
</html>

The first outer width is 200 + 40 + 10 = 250px. The border-box sample is 200px wide, leaving a 150px content box.

When borders and padding exceed the size

A border-box content size cannot become negative. If the padding and borders exceed the declared width, the content floors at zero and the outer box can be larger than the declared width. This property is not a universal overflow fix.

A site-wide reset and external components

Border-box often simplifies percentage widths with padding. Include pseudo-elements deliberately and check external widgets that expect content-box. Some tables and controls have browser rules, so inspect actual computed values.

When the specified width is smaller than padding and borders

Save this complete document as css-reference-10630-practice.html in UTF-8 and open it in a browser. Test it as a separate file rather than nesting it inside another example.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>When the specified width is smaller than padding and borders</title>
  <style>
    body { margin: 16px; color: #20242b; font: 16px/1.7 sans-serif; }
    main { max-width: 52rem; margin: auto; }
    h1 { font-size: 1.35rem; }
    .samples { display: flex; flex-wrap: wrap; gap: 24px; }
    .samples > * { max-width: 100%; min-width: 0; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
.box { width:30px;padding:20px;border:5px solid #006c9c;background:#ffd166; margin-bottom:20px; } .border {box-sizing:border-box;} .content {box-sizing:content-box;}
  </style>
</head>
<body>
<main>
  <h1>When the specified width is smaller than padding and borders</h1>
<p>border-box</p><div class="box border"></div><p>content-box</p><div class="box content"></div>
</main>
</body>
</html>

Horizontal padding and borders total 50px. The border-box content cannot shrink below zero, so its outer width is 50px; content-box is 30+40+10=80px. Compare declared width with getBoundingClientRect().width. Change only width to 100px, expect 100 and 150px, and restore 30px.

Before a common reset on *, *::before, and *::after, decide its scope and inspect third-party widgets that may assume content-box. Do not apply a site-wide reset merely to fix this sample. Exclude the widget scope or restore its original value on the appropriate selector, then recheck dimensions.

For relating content, padding, and borders in a layout, see The CSS Box Model: Content, Padding, Border, and Margin. Related properties to compare alongside these conditions are border-width.

When the result is missing or unexpected

Compare the full box-model dimensions rather than width alone.
Check margins separately when a box appears pushed out of place.

CSS Reference

CSS / Reference / opacity: Group Transparency, Background Alpha, and Interaction

Fade an element and its children or make only its background translucent. Check stacking, contrast, keyboard focus, and the difference between transparency and hiding.

CSS / Reference / background-color: Background Alpha, Inheritance, and Contrast

Set a background or a partly transparent color without fading the text. Distinguish transparency from inheritance and provide readable image fallbacks.

CSS / Reference / empty-cells: Show or Hide Empty Table Cells

Control empty-cell borders and backgrounds in a separated table while preserving its structure. Compare show, hide, whitespace, and the collapsed-border exception.

CSS / Reference / background-size: Cover, Contain, and Background Sizing

Compare background cover and contain using a known image ratio. Account for positioning areas, percentages, cropping, repeated tiles, and the element’s own size.

CSS / Reference / background-attachment: Viewport, Box, and Internal Scroll Attachment

Compare local and scroll backgrounds inside a scrolling box and distinguish them from viewport-fixed backgrounds. Test target-browser behavior and a usable fallback.

CSS / Reference / background-image: Images, Gradients, Relative Paths, and Layers

Paint gradients or image layers, resolve paths from the correct stylesheet location, and keep meaningful pictures in accessible HTML rather than background decoration.

CSS / Reference / clip: Understand Legacy Clip and Migrate to Clip-Path

Read legacy rect coordinates and compare them with clip-path inset distances. Keep layout sizing and clipping separate when migrating existing CSS.

CSS / Reference / quotes: Choose Nested Quotation Marks

Choose generated quotation pairs for nested text and distinguish them from literal punctuation. Compare automatic marks, none, and quotation-depth operations.

CSS / Reference / background-clip: Background Painting Areas and Text Clipping

Choose border, padding, or content painting areas independently of image positioning. Compare visible boundaries and plan readable fallbacks for text-clipped backgrounds.

CSS / Reference / box-sizing: Content and Border Boxes, Including Small-Size Limits

Calculate content-box and border-box sizes, including margins and the minimum content-size limit. Apply resets deliberately and check external components.