How to set width style and color of rule between columns in CSS ?

Last Updated : 01 Apr, 2021

In this article, we will learn how to specify the width, style, and color of the rule between columns.

Approach: The column-rule property is used to specify the width, style, and color of the rule between columns. It takes three values width of the rule, the style of the rule, and the color of the rule.

Syntax:

column-rule: width style color;

Example 1:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <style>
        .gfg {
            font-size: 30px;
            column-width: 160px;
            column-rule: 5px solid red;
        }
    </style>
</head>
  
<body>
    <div class="parent" style="width: 50%;">
        <div class="gfg">
            GeeksforGeeks is my favorite site 
            where I can gain a lot of knowledge 
            and can also share my knowledge what 
            I have gained while learning. We can 
            add more paragraphs for content. 
            This is just an example to tell you 
            how to specify the optimal width for
            the columns in CSS? The column width 
            is 160px in this example.
        </div>
    </div>
</body>
  
</html>

Output:

Example 2:

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
        .gfg{
          font-size: 30px;
          column-width: 160px;
          column-rule: 5px dotted blue;
        }
    </style>
  </head>
  <body>
    <div class="parent" style="width: 50%;">
      <div class="gfg">
        GeeksforGeeks is my favorite site where 
        I can gain a lot of knowledge and can
        also share my knowledge what I have gained 
        while learning. We can add more 
        paragraphs for content. This is just an 
        example to tell you how to specify 
        the optimal width for the columns in CSS? The 
        column width is 160px in this example. 
      </div>
    </div>
  </body>
</html>

Output:

My Personal Notes

Related Articles

HTML

HTML