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

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

CSS column-rule-color Property Definition and Usage

The CSS `column-rule-color` property is used to set the color of the line between each column that is created via the `column-count` property.

Note: before you can use this property, you need to set the style for this line using the `column-rule-style` property.

CSS column-rule-color Property Syntax

column-rule-color: color|initial|inherit;

CSS column-rule-color Property Value

The value we set for this property is the color we want the target line between columns to have on.

The value could be either a color-name, RGB, HSL value.

Also, the two global values “initial” and “inherit” could also be used for this property.

Example: column-rule-color property in CSS

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

How Does CSS column-rule-color Property Work?

In this example, the value of the column-rule-color is set to “lightblue” which means the target line between these columns take the lighblue color on.