Javascript Reference - HTML DOM Style borderTopWidth Property
The borderTopWidth property sets or gets the
width of the top border.
Browser Support
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
borderTopWidth |
Yes | Yes | Yes | Yes | Yes |
Syntax
Return the borderTopWidth property:
var v = object.style.borderTopWidth
Set the borderTopWidth property:
object.style.borderTopWidth='thin|medium|thick|length|initial|inherit'
Property Values
| Value | Description |
|---|---|
| thin | thin top border |
| medium | medium top border. default |
| thick | thick top border |
| length | set the thickness of the top border |
| inherit | inherit the border width from the parent element |
Technical Details
| Default Value: | medium |
|---|---|
| Return Value: | A string representing the width of top border |
| CSS Version | CSS1 |
Example
The following code shows how to change the width of the top border of a <div> element to 10px.
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!--from w w w. j a v a2 s .c o m-->
border-style: solid;
}
</style>
</head>
<body>
<div id="myDiv">This is a div element.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
document.getElementById("myDiv").style.borderTopWidth = "10px";
}
</script>
</body>
</html>
The code above is rendered as follows:
Example 2
The following code shows how to change the width of the top border of a <div> element to thin.
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!-- w ww . j ava2 s. c o m-->
border-style: solid;
}
</style>
</head>
<body>
<div id="myDiv">This is a div element.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
document.getElementById("myDiv").style.borderTopWidth = "thin";
}
</script>
</body>
</html>
The code above is rendered as follows:
Example 3
The following code shows how to get the width of the top border.
<!DOCTYPE html>
<html>
<body>
<!--from w ww . jav a2 s. c om-->
<div id="myDiv" style="border-top:thick solid red">This is a div element.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
console.log(document.getElementById("myDiv").style.borderTopWidth);
}
</script>
</body>
</html>
The code above is rendered as follows: