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

• 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 -