# CSS column-rule-color

Feb. 7, 2018 1071

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;


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-.

Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT