HTML DOM Style borderLeft Property

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

Following is the syntax for −

Setting the borderImageWidth property −

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

The above properties are explained as follows −

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

Let us look at an example for the borderLeft property −

Example

<!DOCTYPE html>
<html>
<head>
<style>
   #P1 {
      border-left: 4px solid magenta;
      font-size: 1.5rem;
   }
</style>
<script>
   function changeBorderLeft(){
      document.getElementById("P1").style.borderLeft="9px dashed red";
      document.getElementById("Sample").innerHTML="The left 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 left border properties by clicking the below button</p>
<button onclick="changeBorderLeft()">Change Border Left</button>
<p id="Sample"></p>
</body>
</html>

Output

HTML DOM Style borderLeft Property

On clicking the “Change Border Left” button −

HTML DOM Style borderLeft 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-left: 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 Left” that will execute the changeBorderLeft() function on being clicked by the user.

<button onclick="changeBorderLeft()">Change Border Left</button>

The changeBorderLeft() function gets the borderLeft 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 changeBorderLeft(){
   document.getElementById("P1").style.borderLeft="9px dashed red";
   document.getElementById("Sample").innerHTML="The left border for the paragraph element is now changed";
}