Javascript Reference - HTML DOM Style borderLeftStyle Property

The borderLeftStyle property sets or gets the style of the left border.

Browser Support


`borderLeftStyle`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the borderLeftStyle property:


var v = object.style.borderLeftStyle

Set the borderLeftStyle property:

object.style.borderLeftStyle=value

Property Values

Value	Description
none	Default value. No border.
hidden	Same as 'none', except for table elements
dotted	dotted border
dashed	dashed border
solid	solid line border
double	two line borders.
groove	Defines a 3D grooved border.
ridge	Defines a 3D ridged border.
inset	Defines a 3D inset border.
outset	Defines a 3D outset border.
initial	Set to its default value.
inherit	Inherits from its parent element.

Technical Details

Default Value:	none
Return Value:	A string representing the left border style
CSS Version	CSS1

Example

The following code shows how to add a solid left border.


<!DOCTYPE html>
<html>
<body>
<div id="myDiv">This is a div element.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {<!--from  ww  w. ja  v a 2  s  .co m-->
    document.getElementById("myDiv").style.borderLeftStyle = "solid";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to change the left border style.


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!--from w  w w.  j  a v a 2s.  c  o  m-->
    border: thick solid #FF0000;
}
</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.borderLeftStyle = "dotted";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to get the left border style.


<!DOCTYPE html>
<html>
<body>
<div id="myDiv" style="border-left:double;">This is a div.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {<!--from w w w .  ja  v a2  s  .c o m-->
    console.log(document.getElementById("myDiv").style.borderLeftStyle);
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 4

A demonstration of all the different values:


<!DOCTYPE html>
<html>
<body>
<!--from w w w. j  a v a  2 s  .  com-->
<div id="myDiv">This is a div element.</div>
<br>

<select onchange="myFunction(this);" size="10">
  <option>none</option>
  <option>hidden</option>
  <option>dotted</option>
  <option>dashed</option>
  <option>solid</option>
  <option>double</option>
  <option>groove</option>
  <option>ridge</option>
  <option>inset</option>
  <option>outset</option>
</select>

<script>
function myFunction(selectTag) {
    var listValue = selectTag.options[selectTag.selectedIndex].text;
    document.getElementById("myDiv").style.borderLeftStyle = listValue;
}
</script>

</body>
</html>

The code above is rendered as follows: