CSS column-rule-color Property

The column-rule-color property sets the color of the rule.

The color of the rule can also be specified by the column-rule shorthand property.

You can find web colors in our HTML colors section and try to choose your preferred colors with our Color Picker tool.

Initial Value currentColor
Applies to Multicol elements.
Inherited No.
Animatable Yes. Color of rule is animatable.
Version CSS3
DOM Syntax object.style.columnRuleColor = "#666";

Syntax

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

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 20px;  
      -webkit-column-rule-style: dashed;
      -webkit-column-rule-color: lightgreen;
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 20px;  
      -moz-column-rule-style: dashed;
      -moz-column-rule-color: lightgreen;
      column-count: 3;
      column-gap: 20px; 
      column-rule-style: dashed;
      column-rule-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <h2>The column-rule-color example</h2>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

You can set hexadecimal, RGB, RGBA, HSL, HSLA or color names as a value for the column-rule-color property.

Here is an example where a hexadecimal value is set for the column-rule-color property:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 40px;  
      -webkit-column-rule-style: solid;
      -webkit-column-rule-color: #8ebf42;
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 40px;  
      -moz-column-rule-style: solid;
      -moz-column-rule-color: #8ebf42;
      column-count: 3;
      column-gap: 40px;
      column-rule-style: solid;
      column-rule-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>The column-rule-color example</h2>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

An example with the column-rule-color property using an RGB value:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 40px;  
      -webkit-column-rule-style: double;
      -webkit-column-rule-color: rgb(234, 211, 21);
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 40px;  
      -moz-column-rule-style: double;
      -moz-column-rule-color: rgb(234, 211, 21);
      column-count: 3;
      column-gap: 40px;
      column-rule-style: double;
      column-rule-color: rgb(234, 211, 21);
      }
    </style>
  </head>
  <body>
    <h2>The column-rule-color example</h2>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

See an example with the column-rule-color property using an HSL value:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 30px;  
      -webkit-column-rule-style: solid;
      -webkit-column-rule-color: hsl(351, 97%, 57%);
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 30px;  
      -moz-column-rule-style: solid;
      -moz-column-rule-color: hsl(351, 97%, 57%);
      column-count: 3;
      column-gap: 30px;
      column-rule-style: solid;
      column-rule-color: hsl(351, 97%, 57%);
      }
    </style>
  </head>
  <body>
    <h2>The column-rule-color example</h2>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Values

Value Description
color Sets the color of the rule. Color names, hexadecimal color codes, rgb(), rgba(), hsl(), hsla() can be used.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Browser support

50.0
-webkit-
10+ 12.0
-webkit-
52.0
+ 3.5 -moz-
3.0
-webkit-
11.1
+ 15.0 -webkit-




Related articles