box-sizing property CSS Reference

Definition and Usage

The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.

  • Initial content-box
  • Applies to all elements that accept width or height
  • Inherited no
  • Media visual
  • Computed Value as specified
  • Animatable no
  • Canonical order the unique non-ambiguous order defined by the formal grammar


Formal syntax: content-box | padding-box | border-box
box-sizing: content-box
box-sizing: padding-box
box-sizing: border-box
box-sizing: inherit


This is the default style as specified by the CSS standard. The width and height properties are measured including only the content, but not the border, margin, or padding.
The width and height properties include the padding size, and do not include the border or margin.
The width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode.


/* support Firefox, WebKit, Opera and IE8+ */
.example {
  -moz-box-sizing: border-box;
       box-sizing: border-box;


Desktop browsers

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0-webkit
1.0 (1.0)-moz


7.0 3.0 (522)-webkit
padding-box Not supported 1.0 (1.0)NANot supportedNA

Mobile browsers

FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1-webkit
1.0 (1.0)-mozMango 7.5(Yes)(Yes)
padding-box NA 1.0 (1.0)NANANA

Relative articles