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

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

MozBorderEnd style property

Browser support:

Specifies or returns the color, style and width properties for the end of the element's border, in a shorthand form. Use the borderLeft property instead.

Equivalent to the borderLeft property, for a cross-browser solution use borderLeft instead.

Syntax:

object.MozBorderEnd;

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-end

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):

•	<-moz-border-end-color>
•	<-moz-border-end-style>
•	<-moz-border-end-width>

•

inherit

Description of values:

-moz-border-end-color

Sets or retrieves the color of the element's border end. Use the borderLeftColor property instead.

-moz-border-end-style

Sets or retrieves the style of the element's border end. Use the borderLeftStyle property instead.

-moz-border-end-width

Sets or retrieves the width of the element's border end. Use the borderLeftWidth property instead.

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 -moz-border-end property:

<head>
    <style>
        .example {
            border-top: 2px solid green;
            -moz-border-end: 4px solid red;
            -moz-border-start: 4px solid red;
        }
    </style>
</head>
<body>
    <div class="example">-moz-border-end: 4px solid red</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 MozBorderEnd property in JavaScript:

<head>
    <script type="text/javascript">
        function ChangeBorder () {
            var selectCont = document.getElementById ("selectCont");
            var selectTags = selectCont.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");
            if ('MozBorderEnd' in div.style) {
                div.style.MozBorderEnd = selectState[0] + " " + selectState[1] + " " + selectState[2];
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <div id="myDiv" style="border-top: 2px solid green; -moz-border-end: 4px solid blue;">
        Sample division with border-left
    </div>

    <div id="selectCont">
        <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>
    </div>
</body>