YouTip

# Style boxSizing Property [ Style Object](#) ## Example Change the boxSizing property: document.getElementById("myDIV").style.boxSizing="border-box"; [Try it Yourself »](#) * * * ## Definition and Usage The boxSizing property allows you to define the behavior of an element's width and height in a specific way. For example, if you need to place two boxes with borders side by side, you can achieve this by setting boxSizing to "border-box". This allows the browser to render the box with the specified width and height, and includes the border and padding within the box. * * * ## Browser Support  Internet Explorer, Opera, Chrome, and Safari support the boxSizing property. Firefox supports an alternative property, MozBoxSizing. * * * ## Syntax Get 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 behavior defined by CSS2.1. The specified width and height (and min/max properties) apply to the width and height of the element's content box. Padding and border are drawn outside the specified width and height. | | border-box | The specified width and height (and min/max properties) for the element determine the element's border box. This means that any padding and border specified for the element are drawn within the specified width and height. The content width and height are calculated by subtracting the border and padding from the specified 'width' and 'height' properties. | | initial | Sets this property to its default value. See (#). | | inherit | Inherits this property from its parent element. See (#). | ## Technical Details | Default Value: | content-box | | --- | | Return Value: | A string, representing the element's box-sizing property. | | CSS Version | CSS3 | * * * ## Related Articles CSS Reference: (#) * * Style Object](#)