CSS column-rule-color

The column-rule-color property is used to give a color to the rule between adjacent columns in a multi-column layout. It is a longhand property for column-rule.

CSS

column-rule-color: value;

A column rule is like a border drawn between adjacent columns in a multi-column document, which can make it easier to distinguish between different columns if the column gap is small and can make the layout look more presentable. You can give it a color using the column-rule-color property.

A column rule does not take up any space. It appears in the middle of the space between adjacent columns. The space between columns can be changed using the column-gap property.

Note that you must define the column-rule-style property while giving the column-rule-color value. This is because there is no column rule present by default. So in order to give a rule color, you must first define a rule using the column-rule-style property.

Values

<color> : Specifies the color of the rule. Its default color is black (or #000).

initial : Sets the default value of the property.

inherit : Inherits the value from parent element.

Examples

The following demo shows the rule colors for different values. The number of columns into which the content of the paragraphs is to be divided is set to 3 using the column-count property, and the gap between the columns is set as 40px using the column-gap property. Use the prefix -webkit- for browser support from Chrome, Safari and Opera, and -moz- for support from Firefox.

The code to give blue color to a rule is shown below, where c1 is the id of the paragraph the color of whose rule is to be changed.

HTML

<p id="c1">Lorem ipsum ... malesuada lorem.</p>

CSS

p {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;   
  -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
  -moz-column-gap: 40px; /* Firefox */
  column-gap: 40px;
}

#c1 {
  -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
  -moz-column-rule-style: solid; /* Firefox */
  column-rule-style: solid;
  -webkit-column-rule-width: 5px; /* Chrome, Safari, Opera */
  -moz-column-rule-width: 5px; /* Firefox */
  column-rule-width: 5px;    
  -webkit-column-rule-color: blue; /* Chrome, Safari, Opera */
  -moz-column-rule-color: blue; /* Firefox */
  column-rule-color: blue;    
}

See the Pen column-rule-color values by Aakhya Singh (@aakhya) on CodePen.

In this example, rule styles and widths are given using the column-rule-style and column-rule-width properties respectively. You may not see good results for multi columns in small devices.

Browser Support

This property is not supported in IE 9 and earlier versions. For maximum browser compatibility, use the prefixes -webkit- and -moz-.