CSS3 column-rule-style Property

Example

Specify the style of the rule between columns:

div
{
-moz-column-rule-style:dotted; /* Firefox */
-webkit-column-rule-style:dotted; /* Safari and Chrome */
column-rule-style:dotted;
}

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

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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


Definition and Usage

The column-rule-style property specifies the style of the rule between columns.

Default value: none
Inherited: no
Version: CSS3
JavaScript syntax: object.style.columnRuleStyle="dotted"


Syntax

column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;

Value Description
none Defines no rule
hidden Defines a hidden rule
dotted Defines a dotted rule
dashed Defines a dashed rule
solid Defines a solid rule
double Defines a double rule
groove Specifies a 3D grooved rule. The effect depends on the width and color values
ridge Specifies a 3D ridged rule. The effect depends on the width and color values
inset Specifies a 3D inset rule. The effect depends on the width and color values
outset Specifies a 3D outset rule. The effect depends on the width and color values


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.

Column-rule
Specify the width, style and color of the rule between columns.