CSS column-rule-width

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

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{column-count: 3; column-rule-style: solid;
         column-rule-width: 20px;}
   </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-width Syntax

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

column-rule-width: x;

The value of x should be any of the following:

Length - Used to define custom width of rule between columns. For example: 12px, 20px etc.
thin - Used to define thin rule between columns
medium - Used to define medium rule between columns
thick - Used to define thick rule between columns
initial - Used to use the default value
inherit - Used to use the value inherited by the parent element

CSS column-rule-width Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{margin-bottom: 20px;
         column-count: 2; column-rule-style: dashed;}
      div.a{column-rule-width: thin;}
      div.b{column-rule-width: medium;}
      div.c{column-rule-width: thick;}
      div.d{column-rule-width: 12px;}
      div.e{column-rule-width: 22px;}
   </style>
</head>
<body>
   
   <h2>column-rule-width: thin</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!
      Consectetur libero autem, laudantium tenetur itaque non deleniti facere
      magni, repellat vel quis ratione!
   </div>
   
   <h2>column-rule-width: medium</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!
      Consectetur libero autem, laudantium tenetur itaque non deleniti facere
      magni, repellat vel quis ratione!
   </div>
   
   <h2>column-rule-width: thick</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!
      Consectetur libero autem, laudantium tenetur itaque non deleniti facere
      magni, repellat vel quis ratione!
   </div>
   
   <h2>column-rule-width: 12px</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!
      Consectetur libero autem, laudantium tenetur itaque non deleniti facere
      magni, repellat vel quis ratione!
   </div>
   
   <h2>column-rule-width: 22px</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!
      Consectetur libero autem, laudantium tenetur itaque non deleniti facere
      magni, repellat vel quis ratione!
   </div>
   
</body>
</html>