CSS column-rule-color

The column-rule-color property in CSS is used to set the color of the rule between columns in a multi-column layout. This property is used in conjunction with the column-count or column-width properties to create multiple columns of text.

The syntax for the column-rule-color property is:


.column {
  column-count: 3;
  column-rule: 2px solid;
  column-rule-color: blue;
}

In this example, the column-rule-color property is set to blue, which will change the color of the rule between columns to blue. Let's see this in action with an example:

Result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.

In the example above, we have a multi-column layout with the column rule color set to blue. The text is divided into three columns and the rule color between the columns is blue.

You can set the column-rule-color property to any valid CSS color value, such as a color keyword, a HEX value, an RGB value, or an RGBA value.

It is important to note that the column-rule-color property will only have an effect if the column-rule property is also set. If the column-rule property is not set, the column rule color will not be displayed.

Experiment with different colors and column configurations to see how the column-rule-color property can affect the appearance of a multi-column layout.