CSS PROPERTIES
Expand All|Collapse All
CSS AT-RULES
SPONSORED LINKS

CSS3 box-sizing Property

Topic: CSS3 Properties Reference« Prev|Next »

Description

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

The following table summarizes the usages context and the version history of this property.

Default value: content-box
Applies to: All elements that accept width or height
Inherited: No
Animatable: No. See animatable properties.
Version: New in CSS3

Syntax

The syntax of the property is given with:

box-sizing: 
content-box | padding-box | border-box | initial | inherit

The example below shows the box-sizing property in action.

  • .box {
  •     width: 50%;
  •     padding: 15px;
  •     float: left;
  •     border: 5px solid #000;
  •     box-sizing: border-box;
  • } 

Property Values

The following table describes the values of this property.

Value Description
content-box The specified width and height properties include only the content of the element. It does not include the padding, border or margin.
padding-box The specified width and height properties include the padding size, and do not include the border or margin.
border-box The specified width and height properties include the padding and border, but not the margin.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element box-sizing property.

Browser Compatibility

The box-sizing property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 2+ -moz-, 29+
  • Google Chrome 4+ -webkit-, 10+
  • Internet Explorer 8+
  • Apple Safari 3.2+ -webkit-, 5.1+
  • Opera 9.5+

Further Reading

See tutorial on: CSS Box Model, CSS Dimension.

Related properties: padding, border, margin.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.