You are here: Reference > JavaScript > client-side > style handling > properties > browser specific extensions > MozBorderBottomColors

MozBorderBottomColors style property

Browser support:
Sets or retrieves the border colors for the bottom edge. You can specify as many color values as you want. All specified colors will appear as a 1px thick line.

Syntax:

object.MozBorderBottomColors;
You can find the related objects in the Supported by objects section below.
This property is read/write.
CSS page for this property: -moz-border-bottom-colors

Possible values:

The type of this property is string.
 One of the following values: 
 This value can be used arbitrary times (use the space character to separate them) 
<color>
none
inherit

Description of values:

color
The color of the border. For the supported color values, see the colors page.
inherit
Takes the value of this property from the computed style of the parent element.
none
Do not use any color striping for this border side.
Default: none.

Example HTML code 1:

This example illustrates the use of the -moz-border-bottom-colors property:
<head>
    <style>
        .example {
            border-bottom-width: 8px;
            border-bottom-style: solid;
            -moz-border-bottom-colors: red blue yellow green;
        }
    </style>
</head>
<body>
    <div class="example">
        border with four colors: red blue yellow green
    </div>
</body>
Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the MozBorderBottomColors property in JavaScript:
<head>
    <style>
        .example {
            border-bottom-width: 8px;
            border-bottom-style: solid;
            -moz-border-bottom-colors: red blue yellow green;
        }
    </style>

    <script type="text/javascript">
        function ChangeBorderColors () {
            var div = document.getElementById ("myDiv");

            if ('MozBorderBottomColors' in div.style) {
                div.style.MozBorderBottomColors = "green yellow blue red";
            }
        }
    </script>
</head>
<body>
    <div class="example" id="myDiv">
        border with four colors: red blue yellow green
    </div>

    <button onclick="ChangeBorderColors ();">Change border colors!</button>
</body>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content