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 −

ParameterDescription
widthFor setting the left border width.
styleFor setting the left border style.
colorFor setting the left border color.
initialFor setting this property to default value.
initialFor setting this property to default value.
inheritTo inherit the parent property value.

Let us look at an example for the borderLeft property −

Example

 Live Demo

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

On clicking the “Change Border Left” button −

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";
}

Updated on: 22-Oct-2019

37 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements