CSS3 column-rule property
Rules between specified columns: width, style, and color:
{
column-rule:3px outset #ff00ff;
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
}
Try it out . . .
There are more examples at the bottom of this page.
Browser support
The numbers in the table support the first browser version number of the property.
The number immediately before -webkit-, -ms- or -moz- is the first browser version number that supports the prefix property.
| Attributes | |||||
|---|---|---|---|---|---|
| column-rule |
50.0
4.0 -webkit- |
10.0 | 2.0 -moz- |
9.0
3.1 -webkit- |
37.0
15.0 -webkit 11.1 |
Description of property definition and use
column-rule attribute
The column-rule property is a shorthand property that sets all column-rule-?properties. The column-rule property sets the width, style, and color between columns.
| Default: | medium none black |
|---|---|
| Inherited: | no |
| Version: | CSS3 |
| JavaScript syntax: | object .style.columnRule="3px outset #ff00ff" |
Grammar
| Value | Description |
|---|---|
| column-rule-width | Sets the width rules between columns |
| column-rule-style | Set the style rules between columns |
| column-rule-color | Sets the color rules between columns |
More instances
Column-count
The text of the div element is divided into three columns.
Column-gap
The text in the div element is divided into three columns and specifies the gap between a 30-pixel column.
Related articles
CSS3 tutorial: CSS3 Multiple Columns