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