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

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

MozColumnRuleColor style property | webkitColumnRuleColor style property

Browser support:

MozColumnRuleColor

	3.5

webkitColumnRuleColor

Specifies or retrieves the color of the column rule.

Note: The MozColumnRuleColor property is supported in Firefox from version 3.5.

Syntax:

object.MozColumnRuleColor;
object.webkitColumnRuleColor;

You can find the related objects in the Supported by objects section below.

MozColumnRuleColor:	This property is read/write.
webkitColumnRuleColor:	This property is read/write.

CSS page for this property: -moz-column-rule-color

Possible values:

The type of this property is string.

One of the following values:

color

Color of the column rule. For the supported color values, see the colors page.

inherit

Takes the value of this property from the computed style of the parent element.

Default: none.

Example HTML code 1:

This example illustrates the use of the -moz-column-rule-color and -webkit-column-rule-color properties:

<head>
    <style>
        #container { 
            -moz-column-count: 4;
            -moz-column-width: 90px;
            -moz-column-rule-width : 3px;
            -moz-column-rule-style : solid;
            -moz-column-rule-color : black;

            -webkit-column-count: 4;
            -webkit-column-width: 90px;
            -webkit-column-rule-width : 3px;
            -webkit-column-rule-style : solid;
            -webkit-column-rule-color : black;
        } 
    </style>
</head>
<body>
    <div id="container">
        This is the contents of the 1. column.<br />
        This is the contents of the 2. column.<br />
        This is the contents of the 3. column.<br />
        This is the contents of the 4. column.<br />
    </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 mozColumnRuleColor and webkitColumnRuleColor properties in JavaScript:

<head>
    <style>
        #container { 
            -moz-column-count: 4;
            -moz-column-width: 100px;
            -moz-column-rule-width : 3px;
            -moz-column-rule-style : solid;
            -moz-column-rule-color : black;

            -webkit-column-count: 4;
            -webkit-column-width: 100px;
            -webkit-column-rule-width : 3px;
            -webkit-column-rule-style : solid;
            -webkit-column-rule-color : black;
        } 
    </style>
    <script type="text/javascript">
        function ChangeToRed () {
            var container = document.getElementById ("container");

            if ('mozColumnRuleColor' in container.style) {
                container.style.mozColumnRuleColor = "red";
            } else if ('webkitColumnRuleColor' in container.style) {
                container.style.webkitColumnRuleColor = "red";
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <div id="container">
        This is the contents of the 1. column.<br />
        This is the contents of the 2. column.<br />
        This is the contents of the 3. column.<br />
        This is the contents of the 4. column.<br />
    </div>
    <button onclick="ChangeToRed ();">change to red</button>
</body>