ExampleSpecify the width, style and color of the rule between columns:
Try it yourself » More examples at the bottom of this page. |
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.
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" |
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 |
![]() |
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.