CSS3 column-rule Property

Example

Specify the width, style and color of the rule between columns:

div
{
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset #ff00ff;
}

Try it yourself »
More examples at the bottom of this page.

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The column-rule property is not supported in any of the major browsers.

Firefox supports an alternative, the -moz-column-rule property.

Safari and Chrome support an alternative, the -webkit-column-rule property.


Definition and Usage

The column-rule property is a shorthand property for setting all the column-rule-* properties.

The column-rule property sets the width, style, and color of the rule between columns.

Default value: medium none black
Inherited: no
Version: CSS3
JavaScript syntax: object.style.columnRule="3px outset #ff00ff"


Syntax

column-rule: column-rule-width column-rule-style column-rule-color;

Value Description
column-rule-width Sets the width of the rule between columns
column-rule-style Sets the style of the rule between columns
column-rule-color Sets the color of the rule between columns


Examples

Try it Yourself - Examples

Column-count
Divide the text in a div element into three columns.

Column-gap
Divide the text in a div element into three columns, and specify a 30 pixels gap between the columns.