CSS column-rule-color Property

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

The column-rule-color property is one of the CSS3 properties.

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 of the column-rule-color property:

<!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>
    <h1>The column-rule-color example</h1>
    <div>
      Lorem Ipsum is 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.

Example of the column-rule-color property with the "hexadecimal" value:

<!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>
    <h1>The column-rule-color example</h1>
    <div>
      Lorem Ipsum is 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>

Result

CSS column-rule-color Property

Example of the column-rule-color property with the "RGB" value:

<!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>
    <h1>The column-rule-color example</h1>
    <div>
      Lorem Ipsum is 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>

Example of the column-rule-color property with the "HSL" value:

<!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>
    <h1>The column-rule-color example</h1>
    <div>
      Lorem Ipsum is 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 Play it
color Sets the color of the rule. Color names, hexadecimal color codes, rgb(), rgba(), hsl(), hsla() can be used. Play it »
initial Sets the property to its default value. Play it »
inherit Inherits the property from its parent element.

Browser support

chrome edge firefox safari opera
50.0
-webkit-
12.0
-webkit-
52.0
+ 3.5 -moz-
3.0
-webkit-
11.1
+ 15.0 -webkit-

Practice Your Knowledge

What is the purpose of the CSS 'column-rule-color' property?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?