HTML | DOM Style borderWidth Property
The borderWidth property in HTML DOM is used to set or return the width of the border element.
Syntax:
- It is used to set the border of width.
object.style.borderWidth = value
- It returns the border width property.
object.style.borderWidth
Return Value: It returns the selected border element with the given style.
There are six different value of border-width property which are listed below:
thick: It sets the border width to thick.
Syntax:
document.getElementById("id_name").style.borderWidth = "thick";Example :
HTML
<!DOCTYPE html><html><head> <title> HTML | DOM Style borderWidth Property </title> <style> div { border: 1px solid green; padding: 10px; text-align: center; } </style></head><body> <div id="d1"> <p>Welcome to GeeksforGeeks.!</p> <p> This tutorial is on HTML | DOM Style borderWidth Property. </p> </div> <br> <input type="button" onclick="myFunction()" value="Click Me.!" /> <script> function myFunction() { document.getElementById("d1").style.borderWidth = "thick"; } </script></body></html> |
Output:
Before Click on the button:
After Click on the button:
length: It is used to set each side of the border-width to given length. The length can be set in terms of px, em, etc.
Syntax:
document.getElementById("id_name").style.borderWidth =
top_px right_px bottom_px left_px;Example: This example set each side of the width of the border.
HTML
<!DOCTYPE html><html><head> <title> HTML | DOM Style borderWidth Property </title> <style> div { border-style: solid; border: 1px solid green; padding: 10px; text-align: center; } </style></head><body> <div id="d1"> <p>Welcome to GeeksforGeeks.!</p> <p> This tutorial is on HTML | DOM Style borderWidth Property. </p> </div> <br> <input type="button" onclick="mainFunction()" value="Click Me.!" /> <script> function mainFunction() { document.getElementById("d1").style.borderWidth = "1px 7px 15px 25px"; } </script></body></html> |
Output:
Before Click on the button:
After Click on the button:
thin: It is used to set the border width to thin.
Syntax:
document.getElementById("id_name").style.borderWidth = "thin";Example:
HTML
<!DOCTYPE html><html><head> <title> HTML | DOM Style borderWidth Property </title> <style> div { border: 8px solid green; padding: 10px; text-align: center; } </style></head><body> <div id="d1"> <p>Welcome to GeeksforGeeks.!</p> <p> This tutorial is on HTML | DOM Style borderWidth Property. </p> </div> <br> <input type="button" onclick="myFunction()" value="Click Me.!" /> <script> function myFunction() { document.getElementById("d1").style.borderWidth = "thin"; } </script></body></html> |
Output:
Before Click on the button:
After Click on the button:
medium: It is used to change the border with to medium. It is the default value of border-width.
Syntax:
document.getElementById("id_name").style.borderWidth = "medium";Example:
HTML
<!DOCTYPE html><html><head> <title> HTML | DOM Style borderWidth Property </title> <style> div { border: 30px solid green; padding: 10px; text-align: center; } </style></head><body> <div id="d1"> <p>Welcome to GeeksforGeeks.!</p> <p> This tutorial is on HTML | DOM Style borderWidth Property. </p> </div> <br> <input type="button" onclick="myFunction()" value="Click Me.!" /> <script> function myFunction() { document.getElementById("d1").style.borderWidth = "medium"; } </script></body></html> |
Output:
Before Click on the button:
After Click on the button:
inherit: It specifies that the border-width property inherited from its parent element.
Syntax:
document.getElementById("id_name").style.borderWidth = "inherit";Example:
HTML
<!DOCTYPE html><html><head> <title> HTML | DOM Style borderWidth Property </title> <style> span { color: blue; border: 3px solid black; padding: 3px; } .d1 span { color: inherit; } div { padding: 5px; display: block; margin: 6px; } .c2 { width: 50%; height: 40%; padding: 20px; border: 2px solid green; } </style></head><body> <div class="c2"> <div> This is first <span>span element</span>. </div> <div class="d1" style="color:green"> This is second <span id="gfg">span element</span>. </div> <div style="color:red"> This is third <span>span element</span>. </div> </div> <br> <input type="button" onclick="myFunction()" value="Click Me.!" /> <script> function myFunction() { document.getElementById("gfg").style.borderWidth = "inherit"; } </script></body></html> |
Output:
Before Click on the button:
After Click on the button:
initial: It sets the borderWidth property to its default value.
Syntax:
document.getElementById("id_name").style.borderWidth = "initial";Example:
HTML
<!DOCTYPE html><html><head> <title> HTML | DOM Style borderWidth Property </title> <style> div { border: 10px solid; border-color: green; padding: 10px; text-align: center; } </style></head><body> <div id="d1"> <p>Welcome to GeeksforGeeks.!</p> <p> This tutorial is on HTML | DOM Style borderWidth Property. </p> </div> <br> <input type="button" onclick="myFunction()" value="Click Me.!" /> <script> function myFunction() { document.getElementById("d1").style.borderWidth = "initial"; } </script></body></html> |
Output:
Before Click on the button:
After Click on the button:
Supported Browsers: The browser supported by DOM borderWidth property are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Safari
- Opera
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
