CSS column-rule-style

The column-rule-style property in CSS is used to specify the style of the rule between columns in a multi-column layout. This property takes a value that specifies the style of the rule, such as solid, dotted, dashed, etc.

Here is the syntax for the column-rule-style property:


.column-rule-style {
  column-rule-style: value;
}

Where value can be one of the following options:

none: No rule is drawn between columns
hidden: A hidden rule is drawn between columns
dotted: A dotted rule is drawn between columns
dashed: A dashed rule is drawn between columns
solid: A solid rule is drawn between columns

Examples

Result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi.

Sed non urna. Donec et ante. Phasellus eu ligula.

Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi.

Morbi nisl sem, accumsan at, faucibus nec, adipiscing id, odio.

In the above example, we have used the solid value for the column-rule-style property. As a result, a solid rule is drawn between the columns in the multi-column layout.