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

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

MozBorderStart style property

Browser support:

Specifies or returns the color, style and width properties for the start of the element's border. Use the borderRight property instead.

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

Syntax:

object.MozBorderStart;

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

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-start-color>
•	<-moz-border-start-style>
•	<-moz-border-start-width>

•

inherit

Description of values:

-moz-border-start-color

Specifies or retrieves the color of the element's border start. Use the borderRightColor property instead.

-moz-border-start-style

Specifies or retrieves the style of the element's border start. Use the borderRightStyle property instead.

-moz-border-start-width

Specifies or retrieves the width of the element's border start. Use the borderRightWidth 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-start property:

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