CSS box-sizing Property

February 10, 2021 12:37 pm IST

You are Here:

CSS box-sizing Property

CSS box-sizing property specifies how the total width and height of an element is calculated.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 300px; height: 100px; padding: 25px; text-align: center; border: 1px solid #8c8c8c; } #point{ box-sizing: content-box; } #point1{ box-sizing: border-box; } </style> </head> <body> <h1>CSS box-sizing property</h1> <h2>box-sizing: content-box;</h2> <div id="point"> My Container </div> <h2>box-sizing: border-box;</h2> <div id="point1"> My Container </div> </body> </html>

Run

Syntax

Using CSS

element{ box-sizing: border-box; }

Using Javascript

object.style.boxSizing="border-box";

Animatable

No, box-sizing property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS box-sizing property is content-box.

Property Value

The following table provides a list of values for CSS box-sizing property.

Value	Explanation
content-box	Specifies that the width and height properties includes only the content. Border and padding are not included.
border-box	Specifies that the width and height properties includes content, padding and border.

Using JavaScript

In the following example, we will demonstrate how to change the CSS box-sizing property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 300px; height: 100px; padding: 25px; text-align: center; border: 1px solid #8c8c8c; box-sizing: content-box; } </style> </head> <body> <h1>CSS box-sizing property</h1> <div> My Container </div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("div")[0]; function myFunction(){ x.style.boxSizing = "border-box"; } </script> </body> </html>

Run