Style boxSizingProperty
Style ObjectExamples
Change the boxSizing property:
document.getElementById("myDIV").style.boxSizing="border-box";
Try it Yourself »
Definition and Usage
The boxSizing property allows you to define a specific element to match a certain area in a specific way.
For example, if you need to place two bordered boxes side by side, you can achieve this by setting boxSizing to "border-box". This causes the browser to render a box with the specified width and height, and puts the border and padding inside the box.
Browser Support
Internet Explorer, Opera, Chrome, and Safari support the boxSizing property.
Firefox supports an alternative property to this one, namely the MozBoxSizing property.
Syntax
Return the boxSizing property:
object.style.boxSizing
Set the boxSizing property:
object.style.boxSizing="content-box|border-box|initial|inherit"
Property Values
| Value | Description |
|---|---|
| content-box | Default value. This is the width and height behavior specified by CSS2.1. The set width and height (and the min/max properties) apply to the width and height of the element's content box respectively. The element's padding and border are drawn outside the set width and height. |
| border-box | The width and height set for the element (and the min/max properties) determine the element's border box. That is, any padding and border specified for the element will be drawn within the set width and height. The content width and height are obtained by subtracting the border and padding from the set 'width' and 'height' properties respectively. |
| initial | Sets the property to its default value. Seeinitial。 |
| inherit | Inherits this property from its parent element. Seeinherit。 |
Technical Details
| Default value: | content-box |
|---|---|
| Return value: | A string representing the box-sizing property of the element. |
| CSS Version | CSS3 |
Related Articles
CSS Reference Manual:box-sizing property
Other Extensions