CSS column-rule-style Property
The column-rule-style specifies the style of the rule between columns. A column-rule is similar to a border that you can add to separate adjacent columns. It can also have styles like a border.
The column-rule-style property in CSS is used to set the style of the column rule between the columns on a multi-column layout.
CSS Syntax
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Property Values:
none: It is the default value and used to specify no rule between the columns.
hidden: It defines the hidden rule between the columns.
dotted: It defines the dotted rule between the columns.
dashed: It defines the dashed rule between the columns.
solid: It defines the solid rule between the columns.
double: It defines the double rule between the columns.
groove: It defines a 3D grooved rule. The effect depends on the width and color values.
ridge: It defines a 3D ridged rule. The effect depends on the width and color values.
inset: It defines a 3D inset rule. The effect depends on the width and color values.
outset: It defines a 3D outset rule. The effect depends on the width and color values.
initial: It sets the value to its default value.
inherit: The property inherited from its parent element.
Supported Browsers: The browsers supported by column-rule-color Property are listed below;
Firefox: 52.0, 2.0 -moz-
Google Chrome: 50.0, 4.0 -webkit-
Internet Explorer: 10.0
Safari: 9.0, 3.1 -webkit-
Opera: 37.0, 15.0 -webkit-, 11.1
Example -
Run Example