Style boxSizing Property

Style boxSizing Property


Style box-sizing Property
It defines how the total width and height of an element are calculated. It is used to specify how to calculate the total height and width of an element. 
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
 
property
 
chrome
 
firefox
 
microsoft edge
 
Opera
 
border-box-sizing
 
10.0
4.0 -webkit-
 
29.0
2.0 -moz-
 
8.0
 
9.5
 
Syntax
box-sizing: content-box|border-box|initial|inherit;
Example
Output
 
Property Values
 
Value
 
Description
 
content-box
 
Default. The width and height properties (and min/max properties) includes only the content. Border and padding are not included
 
border-box
 
The width and height properties (and min/max properties) includes content, padding and border
 
initial
 
Sets this property to its default value.
 
inherit
 
Inherits this property from its parent element.
 
Technical Details
 
Default value:
 
content-box
 
Version:
 
CSS3
 
inherited
 
No
 
Animatable
 
No
 
JavaScript syntax:
 
object.style.boxSizing="border-box"