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>
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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content