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: