Javascript Reference - HTML DOM Style borderLeftWidth Property








The borderLeftWidth property sets or gets the width of the left border.

Browser Support

borderLeftWidth Yes Yes Yes Yes Yes

Syntax

Return the borderLeftWidth property:

var v = object.style.borderLeftWidth 

Set the borderLeftWidth property:

object.style.borderLeftWidth=thin|medium|thick|length|initial|inherit

Property Values

Value Description
thin thin border
medium Default. medium border.
thick thick border
length Set left border width in length units
initial Set to default value.
inherit Inherit from its parent element.




Technical Details

Default Value: medium
Return Value: A string representing the left border width
CSS Version CSS1

Example

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


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!-- w  w  w. ja v  a 2s.  com-->
    border-style: solid;
}
</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.borderLeftWidth = "10px";
}
</script>
</body>
</html>

The code above is rendered as follows:





Example 2

The following code shows how to change the left border width to thin.


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

The code above is rendered as follows:

Example 3

The following code shows how to get the width of the left border.


<!DOCTYPE html>
<html>
<body>
<div id="myDiv" style="border-left:thick solid red">div</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {<!--from   www . jav  a 2 s  . com-->
    console.log(document.getElementById("myDiv").style.borderLeftWidth);
}
</script>

</body>
</html>

The code above is rendered as follows: