HTML - DOM Style Object borderLeftWidth Property

Quiz

HTML DOM Style Object borderLeftWidth property sets or returns the left border width of the element.

Syntax

Given below are the syntax to get or set the borderLeftWidth property.

Set the borderLeftWidth property:

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

Get the borderLeftWidth property:

object.style.borderLeftWidth;

Property Values

Value	Description
thin	It specifies a thin left border of element.
medium	It is default value which specifies a medium border left of element.
thick	It specifies a thick left border of element.
length	It specifies left border width in CSS measurement units like px.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents border left width of an element.

Examples of HTML DOM Style Object 'borderLeftWidth' Property

The following examples gets and sets left border width.

Set the Left Border Width of Element

The following examples illustrates different left border width values like 'length', 'thin', 'medium' and 'thick'.

<!DOCTYPE html>
<html lang="en">
<head>
    <Title>
        HTML DOM Style Object borderLeftWidth Property
    </Title>
    <style>
        h1 {
            border: solid 1px #04af2f;
        }
    </style>
</head>
<body>
    <p>
        Click to change the border style.
    </p>
    <button onclick="length()">Change Width</button>
    <button onclick="thin()">Thin</button>
    <button onclick="medium()">Medium</button>
    <button onclick="thick()">Thick</button>
    <h1 id="border">
        Welcome to Tutorials Point...
    </h1>
    <script>
        function length() {
            document.getElementById("border")
            .style.borderLeftWidth = "10px";
        }
        function thin() {
            document.getElementById("border")
            .style.borderLeftWidth = "thin";
        }
        function medium() {
            document.getElementById("border")
            .style.borderLeftWidth = "medium";
        }
        function thick() {
            document.getElementById("border")
            .style.borderLeftWidth = "thick";
        }
    </script>
</body>
</html>

Get Left Border Width Value

The following example returns the value of left border width.

<!DOCTYPE html>
<html lang="en">
<head>
    <Title>
        HTML DOM Style Object borderLeftWidth Property
    </Title>
    <style>
        h1 {
            border: solid 1px #04af2f;
        }
    </style>
</head>
<body>
    <p>
        Click to change the border style.
    </p>
    <button onclick="length()">Change Width</button>
    <button onclick="thin()">Thin</button>
    <button onclick="medium()">Medium</button>
    <button onclick="thick()">Thick</button>
    <h1 id="border">
        Welcome to Tutorials Point...
    </h1>
    <p id="left"></p>
    <script>
        function length() {
            let x = document.getElementById("border")
                .style.borderLeftWidth = "10px";
            document.getElementById("left").innerHTML = x;
        }
        function thin() {
            let x = document.getElementById("border")
                .style.borderLeftWidth = "thin";
            document.getElementById("left").innerHTML = x;
        }
        function medium() {
            let x = document.getElementById("border")
                .style.borderLeftWidth = "medium";
            document.getElementById("left").innerHTML = x;
        }
        function thick() {
            let x = document.getElementById("border")
                .style.borderLeftWidth = "thick";
            document.getElementById("left").innerHTML = x;
        }
    </script>
</body>
</html>

Supported Browsers

Property
borderLeftWidth	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page