CSS3 column-rule-style property
Specify the style rules between columns:
{
column-rule-style:dotted;
-moz-column-rule-style:dotted; /* Firefox */
-webkit-column-rule-style:dotted; /* 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-style |
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
The column-rule-style property specifies style rules between columns.
| Default: | none |
|---|---|
| Inherited: | no |
| Version: | CSS3 |
| JavaScript syntax: | object .style.columnRuleStyle="dotted" |
Grammar
| Value | Describe |
|---|---|
| none | There are no rules defined. |
| hidden | Define hidden rules. |
| dotted | Define dot rules. |
| dashed | Define dashed rule. |
| solid | Define solid-line rules. |
| double | Define two-line rules. |
| groove | Define 3D grooved rules. The effect depends on the width and color values. |
| ridge | Define 3D ridged rules. The effect depends on the width and color values. |
| inset | Define 3D inset rules. The effect depends on the width and color values. |
| outset | Define 3D outset rules. The effect depends on the width and color values. |
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.
Column-rule
Rules between specified columns: width, style, and color.
Related articles
CSS3 tutorial: CSS3 Multiple Columns