We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

box-sizing Redirect 1

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.


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 value 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;


Specification Status Comment
CSS Basic User Interface Module Level 3 Working Draft  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0-webkit
1.0 (1.7 or earlier)-moz
29.0 (29.0)


7.0 3.0 (522)-webkit
5.1 (534.12)
padding-box Not supported 1.0 (1.0) Not supported Not supported Not supported
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.1-webkit
1.0 (1.0)-moz
29.0 (29.0)
Mango 7.5 (Yes) (Yes)
padding-box Not supported 1.0 (1.0) Not supported Not supported Not supported


  • box-sizing is not respected when the height is calculated from window.getComputedStyle, at least in Internet Explorer 9, but not Firefox 24 and Chrome 24 (other browsers and properties untested). Note that IE9's proprietary currentStyle property does return the correct value of height.

See also

Document Tags and Contributors

Contributors to this page: Sheppy
Last updated by: Sheppy,