Easy Tutorial
❮ Jsref Constructor Number Prop Tabledata Rowspan ❯

boxSizing Property

Style Object

Example

Change the boxSizing property:


Definition and Usage

The boxSizing property allows you to define specific elements in a particular way to match a certain area.

For example, if you need to place two bordered boxes side by side, you can achieve this by setting boxSizing to "border-box". This enables the browser to render the boxes with specified widths and heights, including borders and padding within the box.


Browser Support

Internet Explorer, Opera, Chrome, and Safari support the boxSizing property.

Firefox supports an alternative property, MozBoxSizing.


Syntax

Return the boxSizing property:

Set the boxSizing property:

Property Values

Value Description
content-box Default value. This is the behavior of width and height as specified by CSS2.1. The set width and height (and min/max properties) apply to the width and height of the content box of the element. Padding and borders are drawn outside the specified width and height.
border-box The set width and height (and min/max properties) determine the border box of the element. This means any padding and border specified will be drawn within the set width and height. The content width and height are obtained by subtracting the border and padding from the specified 'width' and 'height' properties.
initial Sets this property to its default value. See initial
inherit Inherits this property from its parent element. See inherit

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: box-sizing Property


Style Object

❮ Jsref Constructor Number Prop Tabledata Rowspan ❯