HTML - DOM Style Object borderBottom Property

Quiz

HTML DOM Style Object borderBottom property sets or returns the border bottom properties of an element. It is a shorthand notation for border-bottom-width, border-bottom-style and border-bottom-color.

Syntax

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

Set the borderBottom property:

object.style.borderBottom= "width | style | color | initial | inherit";

Get the borderBottom property:

object.style.borderBottom;

Property Values

Value	Description
width	It sets the border bottom width.
style	It sets the border bottom style.
color	It sets the border bottom color.
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, style and color property of an element.

Example of HTML DOM Style Object 'borderBottom' Property

The following example sets a bottom border to a section element.

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object borderBottom Property
    </title>
</head>
<body>
    <button onclick="fun()">
        Add Bottom Border
    </button>
    <section id="border">
        Welcome to Tutorials Point...
    </section>
    <script>
        function fun() {
            document.getElementById("border")
            .style.borderBottom = "4px dashed #04af2f";
        }
    </script>
</body>
</html>

Supported Browsers

Property
borderBottom	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page