HTML - DOM Style Object borderBottomWidth Property

Quiz

HTML DOM Style Object borderBottomWidth property sets or returns the border bottom width of the element.

Syntax

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

Set the borderBottomWidth property:

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

Get the borderBottomWidth property:

object.style.borderBottomWidth;

Property Values

Value	Description
thin	It specifies a thin border bottom of element.
medium	It is default value which specifies a medium border bottom of element.
thick	It specifies a thick border bottom of element.
length	It specifies bottom 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 bottom width of an element.

Examples of HTML DOM Style Object 'borderBottomWidth' Property

The following examples gets and sets bottom border width.

Set the Bottom Border Width of Element

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

<!DOCTYPE html>
<html lang="en">
<head>
    <Title>
        HTML DOM Style Object borderBottomWidth 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.borderBottomWidth = "10px";
        }
        function thin() {
            document.getElementById("border")
            .style.borderBottomWidth = "thin";
        }
        function medium() {
            document.getElementById("border")
            .style.borderBottomWidth = "medium";
        }
        function thick() {
            document.getElementById("border")
            .style.borderBottomWidth = "thick";
        }
    </script>
</body>
</html>

Get Bottom Border Width Value

The following example returns the value of left border width.

<!DOCTYPE html>
<html lang="en">
<head>
    <Title>
        HTML DOM Style Object borderBottomWidth 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="bottom"></p>
    <script>
        function length() {
            let x = document.getElementById("border")
                .style.borderBottomWidth = "10px";
            document.getElementById("bottom").innerHTML = x;
        }
        function thin() {
            let x = document.getElementById("border")
                .style.borderBottomWidth = "thin";
            document.getElementById("bottom").innerHTML = x;
        }
        function medium() {
            let x = document.getElementById("border")
                .style.borderBottomWidth = "medium";
            document.getElementById("bottom").innerHTML = x;
        }
        function thick() {
            let x = document.getElementById("border")
                .style.borderBottomWidth = "thick";
            document.getElementById("bottom").innerHTML = x;
        }
    </script>
</body>
</html>

Supported Browsers

Property
borderBottomWidth	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page