Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how to specify the width, style, and color of the rule between columns. To set the width and color of the rule between columns in CSS, you can use the column-rule properties.

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: In this example, we are using the above-explained approach.

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: Here is another example of using column rule property.

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:



Last Updated : 08 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads