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 1 and above
- Edge 12 and above
- Internet Explorer 4 and above
- Firefox 1 and above
- Safari 1 and above
- Opera 3.5 and above
Last Updated :
08 Aug, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...