CSS column-rule-style

The CSS column-rule-style property is used to define the style of rule created between columns. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{column-count: 2; column-rule-style: dotted;}
   </style>
</head>
<body>
   
   <div>
      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!
      Consectetur libero autem, laudantium tenetur itaque non deleniti facere
      magni, repellat vel quis ratione!
   </div>
   
</body>
</html>

Output

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! Consectetur libero autem, laudantium tenetur itaque non deleniti facere magni, repellat vel quis ratione!

CSS column-rule-style Syntax

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

column-rule-style: x;

The value of x should be any of the following:

solid - Used to define solid styled rule
dashed - Used to define dashed styled rule
dotted - Used to define dotted styled rule
double - Used to define double styled rule
groove - Used to define groove styled rule
ridge - Used to define ridge styled rule
inset - Used to define inset styled rule
outset - Used to define outset styled rule
hidden - Used to define hidden rule
none - Used to define no rule. This is the default value
initial - Used to use the default value
inherit - Used to use the value inherited by the parent element

CSS column-rule-style Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{margin-bottom: 20px; column-count: 2;
         column-rule-width: 14px; column-rule-color: red;}
      div.a{column-rule-style: solid;}
      div.b{column-rule-style: dashed;}
      div.c{column-rule-style: dotted;}
      div.d{column-rule-style: double;}
      div.e{column-rule-style: groove;}
      div.f{column-rule-style: ridge;}
      div.g{column-rule-style: inset;}
      div.h{column-rule-style: outset;}
   </style>
</head>
<body>
   
   <h2>column-rule-style: solid</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-style: dashed</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>
   
   <h2>column-rule-style: dotted</h2>
   <div class="c">
      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-style: double</h2>
   <div class="d">
      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-style: groove</h2>
   <div class="e">
      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-style: ridge</h2>
   <div class="f">
      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-style: inset</h2>
   <div class="g">
      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-style: outset</h2>
   <div class="h">
      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>