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

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

MozColumnRule style property | webkitColumnRule style property

Browser support:

MozColumnRule

	3.5

webkitColumnRule

Specifies or retrieves the style, color and width of the column rule.

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

Syntax:

object.MozColumnRule;
object.webkitColumnRule;

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

MozColumnRule:	This property is read/write.
webkitColumnRule:	This property is read/write.

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

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-column-rule-color>
•	<-moz-column-rule-style>
•	<-moz-column-rule-width>

•

inherit

Description of values:

-moz-column-rule-color

Specifies or retrieves the color of the column rule.

-moz-column-rule-style

Specifies or retrieves the style of the column rule, which is placed in the middle of the column gap.

-moz-column-rule-width

Specifies or retrieves the width of the column rule, which is placed in the middle of the column gap.

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 and -webkit-column-rule properties:

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

            -webkit-column-count: 4;
            -webkit-column-width: 90px;
            -webkit-column-rule : 3px solid 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 mozColumnRule and webkitColumnRule properties in JavaScript:

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

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

            if ('mozColumnRule' in container.style) {
                container.style.mozColumnRule = "3px solid red";
            } else if ('webkitColumnRule' in container.style) {
                container.style.webkitColumnRule = "3px solid 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>