The box-sizing property is used to alter the default CSS box model used to calculate widths and heights of elements.

  • Initial valuecontent-box
  • Applies toAll elements that accept width or height
  • InheritedNo
  • MediaVisual
  • Computed valueSpecified value
  • AnimatableNo
  • CSS VersionCSS3
  • JavaScript syntaxobject.style.boxSizing
Formal syntax: content-box | padding-box | border-box | inherit

box-sizing: content-box;
box-sizing: padding-box;
box-sizing: border-box;
  • content-boxThis 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.
  • padding-boxThe width and height properties include the padding size, and do not include the border or margin.
  • border-boxThe 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
.class {
   box-sizing: padding-box; 
}
noFirefox8+Explorer9+Chrome5.1+Safari8+Opera


Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.