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

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

MozBorderTopColors style property

Browser support:

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

Syntax:

object.MozBorderTopColors;

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-top-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-top-colors property:

<head>
    <style>
        .example {
            border-top-width: 8px;
            border-top-style: solid;
            -moz-border-top-colors: red blue yellow green;
        }
    </style>
</head>
<body>
    <div class="example">
        border with four colors: red blue yellow green
    </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 MozBorderTopColors property in JavaScript:

<head>
    <style>
        .example {
            border-top-width: 8px;
            border-top-style: solid;
            -moz-border-top-colors: red blue yellow green;
        }
    </style>

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

            if ('MozBorderTopColors' in div.style) {
                div.style.MozBorderTopColors = "green yellow blue red";
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </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>