HTML | DOM Style borderLeft Property
The DOM style borderLeft property is used to set or returns the three different border-left property such as border-left-width, border-left-style and border-left-color of an element.
Syntax:
- It is used to return the borderLeft Property.
object.style.borderLeft
- It is used to set the borderLeft property.
object.style.borderLeft = "width style color|initial|inherit"
Property value:
- width: This will set the width of left border.
- style: This will set the style of left border.
- color: This will set the color of left border.
- initial: This will set the property to it’s default value.
- inherit: This will inherit the property from it’s parent element
Return Value: It returns a string value which represents the width, style and/or color of the left border of an element.
Example 1:
html
<!DOCTYPE html><html> <head> <title> DOM Style borderLeft Property </title> </head> <body> <center> <h1 style = "color:green;width:50%;" id = "sudo"> GeeksForGeeks </h1> <h2>DOM Style borderLeft Property </h2><br> <button type = "button" onclick = "geeks()"> Submit </button> <script> function geeks() { document.getElementById("sudo").style.borderLeft = "thick solid green"; } </script> </center> </body></html> |
Output:
Before Click on the button:
After Click on the button:
Example 2:
html
<!DOCTYPE html><html> <head> <title> DOM Style borderLeft Property </title> </head> <body> <center> <h1 style = "color:green;"> GeeksForGeeks </h1> <h2>DOM Style borderLeft Property </h2> <h3 style = "border:2px solid red;width:50%;" id = "sudo">geksforgeeks</h3> <br> <button type = "button" onclick = "geeks()"> Submit </button> <script> function geeks() { document.getElementById("sudo").style.borderLeft = "thick dotted green"; } </script> </center> </body></html> |
Output:
Before Click on the button:
After Click on the button:
Supported Browsers: The browser supported by DOM borderLeft Property are listed below:
- Google Chrome 1
- Edge 12
- Internet Explorer 4
- Firefox 1
- Opera 3.5
- Apple Safari 1
.png)
