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