CSS column-rule

The CSS column-rule property is used to define width, style, and color of column rule, at once. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{margin-bottom: 20px; column-count: 2;}
      div.a{column-rule: 8px dotted red;}
      div.b{column-rule: 16px double blue;}
   </style>
</head>
<body>
   
   <h2>column-rule: 8px dotted 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: 16px double 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: 8px dotted 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: 16px double blue

CSS column-rule Syntax

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

column-rule: column-rule-width column-rule-style column-rule-color;

Therefore the column-rule property can also be called/used as shorthand for following three properties:

column-rule-width - defines the width of rule created between columns
column-rule-style - defines the style of rule created between columns
column-rule-color - defines the color of rules created between columns

Important - From all the three, the column-rule-style property is required.

Note - The initial and the inherit keyword can also be used to define the column-rule property. The initial is used to use the default value, whereas the inherit is used to use the value inherited by the parent element.

CSS Online Test

« Previous Tutorial Next Tutorial »