In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > borderBottom

borderBottom style property

Browser support:

Sets or retrieves the color, style and width properties for the element's bottom border, in a shorthand form.

With this property you can customize the border that appears at the bottom side of HTML elements. You have control over the width, style and color of the border.

border-bottom-style: dotted

border-bottom-style: dashed

border-bottom-style: solid

border-bottom-style: double

border-bottom-style: inset

border-bottom-style: outset

border-bottom-style: groove

border-bottom-style: ridge

border-bottom-style: window-inset

Syntax:

object.borderBottom;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: border-bottom

Possible values:

The type of this property is string.

One of the following values:

•

Any of the following values (use the space character to separate them, each value can be used only once):

•	<border-bottom-color>
•	<border-bottom-style>
•	<border-bottom-width>

•

inherit

Description of values:

border-bottom-color

Specifies or returns the color of the element's bottom border.

border-bottom-style

Specifies or returns the style of the element's bottom border.

border-bottom-width

Specifies or returns the width of the element's bottom border.

inherit

Takes the value of this property from the computed style of the parent element.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the border-bottom property:

<head>
    <style>
        .example {
            border-bottom: 1px solid blue;
        }
    </style>
</head>
<body>
    <div class="example">Border-bottom: 1px solid blue</div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the borderBottom property in JavaScript:

<head>
    <script type="text/javascript">
        function ChangeBorder () {
            var selectTags = document.getElementsByTagName ("select");
            var selectState = [];
            
            for (i = 0; i < selectTags.length; i++) {
                // Returns the index of the selected option
                whichSelected = selectTags[i].selectedIndex;

                // Returns the text of the selected option
                selectState[i] = selectTags[i].options[whichSelected].text;
            }

            var div = document.getElementById ("myDiv");
            div.style.borderBottom = selectState[0] + " " + selectState[1] + " " + selectState[2];
        }

    </script>
</head>
<body>
    <div id="myDiv" style="border-bottom: 1px solid blue">Sample division with border-bottom</div>

    <select onchange="ChangeBorder ();" size="5">
        <option selected="selected" />1px
        <option />3px
        <option />8px
        <option />15px
        <option />24px
    </select>
    <select onchange="ChangeBorder ();" size="10">
        <option />dotted
        <option />dashed
        <option />double
        <option />groove
        <option />inset
        <option />none
        <option />outset
        <option />ridge
        <option selected="selected" />solid
        <option />window-inset
    </select>
    <select onchange="ChangeBorder ();" size="8">
        <option selected="selected" />blue
        <option />red
        <option />cyan
        <option />white
        <option />green
        <option />yellow
        <option />purple
        <option />black
    </select>
</body>