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 :
<!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
>Welocme 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 use 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.
<!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
>Welocme 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:
<!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
>Welocme 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:
<!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
>Welocme 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:
<!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:
<!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
>Welocme 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