Style boxSizing attribute

Definition and usage

boxSizing The attribute allows you to define a specific way to match a particular element in a certain area.

For example, if you need to place two bordered boxes side by side, you can set box-sizing to "border-box". This will make the browser display boxes with specified width and height, and put the border and padding inside the box.

See also:

CSS Reference Manual:box-sizing attribute

Example

Change boxSizing attribute:

document.getElementById("myDIV").style.boxSizing = "border-box";

Try it yourself

Syntax

Return boxSizing attribute:

object.style.boxSizing

Set boxSizing attribute:

object.style.boxSizing = "content-box|border-box|initial|inherit"

Attribute value

Value Description
content-box

Default value. This is the behavior of width and height defined by CSS2.1.

The specified width and height (as well as min/max properties) are applied to the width and height of the element's content box.

The layout and drawing of the element's padding and border are outside the specified width and height.
border-box

The width and height set for the element 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 width and height of the content can be obtained by subtracting the border and padding from the set width and height.
initial Set this attribute to its default value. See initial.
inherit This attribute inherits this property from its parent element. See inherit.

Technical details

Default value: content-box
Return value: string representing the element's box-sizing attribute.
CSS Version: CSS3

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support