Widely availableA practical default for most application UI because it keeps component sizing more predictable.
Layout Widely available

box-sizing

box-sizing controls whether width and height apply to the content box alone or include padding and border. The border-box model often makes sizing easier to reason about.

LayoutSizingBoxes

Overview

box-sizing controls whether width and height apply to the content box alone or include padding and border. The border-box model often makes sizing easier to reason about.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
box-sizing
10
12
29
5.1
18
6
border-box
1
12
1
3
18
2
content-box
1
12
1
3
18
2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Implementation note
  • `box-sizing` is not respected when the height is calculated from `window.getComputedStyle()`.
Compatibility
  • Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (12)
Notes 3 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (49)
  • Available with a vendor prefix: -moz- (1)
Implementation note
  • Before Firefox 23, `box-sizing` is not respected when the height is calculated from `window.getComputedStyle()`.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (3)
Notes 2 item(s)
Implementation note
  • `box-sizing` is not respected when the height is calculated from `window.getComputedStyle()`.
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)

Syntax

CSS 
/* Global reset (recommended) */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Specific styling */
.input {
  box-sizing: border-box;
  width: 100%;
  padding: 0.5rem 1rem;
  border: 2px solid #ccc;
}

Live demo

content-box

box-sizing property Content-box demo.

PreviewFullscreen

border-box

box-sizing property Border-box demo.

PreviewFullscreen

Inputfieldcomparison

box-sizing property Inputfieldcomparison demo.

PreviewFullscreen

Use cases

  • Predictable component widths

    Use border-box to keep form controls and cards within expected dimensions even after padding is added.

  • Reusable design systems

    Reduce layout surprises when components share spacing and border conventions.

Cautions

  • Mixing content-box and border-box models across a design system can make sizing bugs harder to track down.
  • Inherited sizing assumptions should be documented when building reusable components.

Accessibility

  • Predictable sizing reduces clipping and overlap bugs that can hide content at zoomed sizes.

Related links

Powered by web-features