HTML DOM Style borderTop Property

The HTML DOM borderTop property is used as a shorthand for getting or setting the Top border properties for an element. The borderTop property contains border-Top-width, border-Top-style, border-Top-color.

Following is the syntax for −

Setting the borderTop property:

object.style.borderTop = "width style color|initial|inherit"

The above properties are explained as follows −

Parameter	Description
width	For setting the Top border width.
style	For setting the Top border style.
color	For setting the Top border color.
initial	For setting this property to default value.
inherit	To inherit the parent property value.

Let us look at an example for the borderTop property −

Example

<!DOCTYPE html>
<html>
<head>
<style>
   #P1 {
      border-Top: 4px solid magenta;
      font-size: 1.5rem;
   }
</style>
<script>
   function changeBorderTop(){
      document.getElementById("P1").style.borderTop="9px dashed red";
      document.getElementById("Sample").innerHTML="The Top border for the paragraph element is now  changed ";
   }
</script>
</head>
<body>
   <p id="P1">This is some sample text inside the paragraph. Here is another line of this sample text</p>
   <p>Change the above paragraph Top border properties by clicking the below button</p>
   <button onclick="changeBorderTop()">Change Border Top</button>
   <p id="Sample"></p>
</body>
</html>

Output

HTML DOM Style borderTop Property

On clicking the “Change Border Top” button −

HTML DOM Style borderTop Property

In the above example −

We have first created a paragraph with id “P1” that contains some text inside it and a corresponding css style applied to it.

#P1 {
   border-Top: 4px solid magenta;
   font-size: 1.5rem;
}
<p id="P1">This is some sample text inside the paragraph. Here is another line of this sample text</p>

We then created a button “Change Border Top” that will execute the changeBorderTop() function on being clicked by the user.

<button onclick="changeBorderTop()">Change Border Top</button>

The changeBorderTop() function gets borderTop style property of the paragraph element with id “P1” by using the getElementById() method and changes its property value to ‘9px dashed red’ . A message indicating this change is then displayed in the paragraph with id “Sample” using its innerHTML property −

function changeBorderTop(){
   document.getElementById("P1").style.borderTop="9px dashed red";
   document.getElementById("Sample").innerHTML="The top border for the paragraph element is now changed";
}