Javascript Reference - HTML DOM Style borderLeft Property








The borderLeft property sets or gets separate border-left properties, in a shorthand form.

With this property, we can set and get one or more of the following in any order.

  • border-left-width
  • border-left-style
  • border-left-color




Browser Support

borderLeft Yes Yes Yes Yes Yes

Syntax

Return the borderLeft property:

var v = object.style.borderLeft

Set the borderLeft property:

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

Property Values

Parameter Description
width Set the width of the left border
style Set the style of the left border
color Set the color of the left border
initial Set to default value
inherit Inherit from parent element.




Technical Details

Default Value: not specified
Return Value: A string representing the width, style and color of the left border
CSS Version CSS1

Example

The following code shows how to add a left border to a <div> element.


<!DOCTYPE html>
<html>
<body>
<!--from ww  w  .ja  va  2s .c  o m-->
<div id="myDiv">This is a div element.</div>
<button type="button" onclick="myFunction()">Set left border</button>
<script>
function myFunction() {
    document.getElementById("myDiv").style.borderLeft = "thick solid #0000FF";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to change the width, style and color of the left border of a <div> element.


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!--from   w  w  w .ja v  a 2 s  . co  m-->
    border: thick solid blue;
}
</style>
</head>
<body>

<div id="myDiv">This is a div element.</div>
<button type="button" onclick="myFunction()">test</button>

<script>
function myFunction() {
    document.getElementById("myDiv").style.borderLeft = "thin dotted red";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to get the border-left property values of a <div> element:


<!DOCTYPE html>
<html>
<body>
<!--from  w w w  . j  a va  2  s  . com-->
<div id="myDiv" style="border-left:5px solid red;">This is a div element.</div>
<button type="button" onclick="myFunction()">test</button>

<script>
function myFunction() {
    console.log(document.getElementById("myDiv").style.borderLeft);
}
</script>

</body>
</html>

The code above is rendered as follows: