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>

Try it Yourself »

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>

Try it Yourself »

Result

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>

Try it Yourself »

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>

Try it Yourself »

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.