CSS column-rule-color

The CSS column-rule-color property is used to define the color of rules created between columns, using either column-rule or column-rule-style. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{margin-bottom: 20px; column-count: 2; column-rule-style: solid;}
      div.a{column-rule-color: red;}
      div.b{column-rule-color: blue;}
   </style>
</head>
<body>
   
   <h2>column-rule-color: red</h2>
   <div class="a">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas eius
      aut maxime nemo suscipit dolorem non, dolores, ipsum rerum ab placeat rem
      a ut libero ea minus ipsam cum dicta quod modi! Repellendus ad adipisci
      odio modi aspernatur obcaecati libero beatae. Ea magni eius illo ex!
   </div>
   
   <h2>column-rule-color: blue</h2>
   <div class="b">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas eius
      aut maxime nemo suscipit dolorem non, dolores, ipsum rerum ab placeat rem
      a ut libero ea minus ipsam cum dicta quod modi! Repellendus ad adipisci
      odio modi aspernatur obcaecati libero beatae. Ea magni eius illo ex!
   </div>
   
</body>
</html>

Output

column-rule-color: red

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas eius aut maxime nemo suscipit dolorem non, dolores, ipsum rerum ab placeat rem a ut libero ea minus ipsam cum dicta quod modi! Repellendus ad adipisci odio modi aspernatur obcaecati libero beatae. Ea magni eius illo ex!

column-rule-color: blue

CSS column-rule-color Syntax

The syntax of column-rule-color property in CSS, is:

column-rule-color: x;

The value of x should be any of the following:

Color - Used to define custom color to the column rules. For example: red, rgb(255, 0, 0) etc.
initial - Used to use the default value
inherit - Used to use the value inherited by the parent element

CSS Online Test

« Previous Tutorial Next Tutorial »