Style boxSizing Property

Example

Change the boxSizing property:

document.getElementById("myDIV").style.boxSizing = "border-box";
Try it Yourself »

Description

The boxSizing property allows you to define certain elements to fit an area in a certain way.

For example, if you want two bordered boxes side by side, it can be achieved through setting boxSizing to "border-box". This forces the browser to render the box with the specified width and height, and place the border and padding inside the box.


Browser Support

Property
boxSizing Yes Yes Yes Yes Yes

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 behavior of width and height as specified by CSS2.1. The specified width and height (and min/max properties) apply to the width and height respectively of the content box of the element. The padding and border of the element are laid out and drawn outside the specified width and height
border-box The specified width and height (and min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified 'width' and 'height' properties
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Technical Details

Default Value: content-box
Return Value: A String, representing the box-sizing property of an element
CSS Version CSS3

Related Pages

CSS reference: box-sizing property


Copyright 1999-2023 by Refsnes Data. All Rights Reserved.