In this section, we will learn what column-rule-style property is and how to use it in CSS.

Click here to run the example of column-rule-style property.

CSS column-rule-style Property Definition and Usage

When dividing an element into multiple columns using CSS `column-count` property, we might want to set a line between each of these columns so that people can distinguish each column easily.

Now, in order to create that line, we use the CSS `column-rule-style`.

Basically, this property not just creates a line, but also allows us to style this line as well.

By default, that line is just a solid pipe but there are other values: line “dashed”, “dotted” etc. that we can apply and change the default style of the line.

CSS column-rule-style Property Syntax

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

CSS column-rule-style Property Value

Here’s the list of values we can use for this property:

• solid: it creates a solid single line.
• dotted: it creates a series of square dots.
• dashed: it creates a series of short lines
• double: it creates two solid lines
• groove: it creates a line that appears to be carved into the page
• ridge: it creates a line that appears to stick out from the page.
• inset: it creates a line that appears to embedded into the page.
• outset: it creates a line that like it is coming out of the display device.
• Hidden/none: using these two values, no borders will be created.

Example: column-rule-style property in CSS

See the Pen column-rule-style property in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

How Does CSS column-rule-style Property Work?

In this example, the value of the `column-rule-style` property is set to “dotted” which means the line should be in a dotted style.