Javascript DOM CSS Style borderTopWidth Property

Introduction

Change the width of the top border of a <div> element to 10px:

document.getElementById("myDiv").style.borderTopWidth = "10px";

View in separate window

<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {/*from  w w w  . j a  v  a 2s.  c om*/
  border-style: solid;
}
</style>
</head>
<body>

<div id="myDiv">This is a div element.</div>
<br>
<button type="button" onclick="myFunction()">Change width of the top border</button>

<script>
function myFunction() {
  document.getElementById("myDiv").style.borderTopWidth = "10px";
}
</script>

</body>
</html>

The borderTopWidth property sets or gets the width of the top border of an element.

Property Values

Value	Description
thin	a thin border
medium	a medium border. `default`
thick	a thick border
length	The width of the border in length units
inherit	The width of the top border is inherited from the parent element
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

The borderTopWidth property returns a String representing the width of an element's top border.

Previous Next