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.