What is the CSS column-rule-style property?

The column-rule-style property in CSS specifies the rule style between different columns when we are using a multi-column layout.

Syntax


column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Property values

  • none: It is the default value. It specifies that there is no rule.

  • hidden: It is the same as none.

  • dashed: It specifies that the rule is dashed.

  • dotted: It specifies that the rule is dotted.

  • double: It specifies that the rule is double.

  • solid: It specifies that the rule is solid.

  • groove: It specifies a 3D grooved rule.

  • ridge: It specifies a 3D ridged rule.

  • inset: It specifies a 3D inset rule.

  • outset: It specifies a 3D outset rule.

  • initial: This sets the value to its default value.

  • inherit: This inherits property from its parent value.

Code

The following is the basic HTML & CSS code to demonstrate the use of the column-rule-style property:

Explanation

In this example, we have set the column-rule-style property. We can see that a blue dashed line separates the column, and the size of one dash is set to be 5px.

We can also change the style, color, and width according to our own choice.