CSS column-rule Property

CSS column-rule property specifies the width, style, and color of the rule between the columns of a HTML Element.

column-rule is a short hand property for column-rule-width, column-rule-style, and column-rule-color properties.

The syntax to specify a value for column-rule property is

</>
Copy
column-rule: column-rule-width column-rule-style column-rule-color;
column-rule: initial;
column-rule: inherit;

where

ValueDescription
column-rule-width[Optional] Width of the rule. Refer column-rule-width.
column-rule-styleStyle of the rule. Refer column-rule-style.
column-rule-color[Optional] Color of the rule. Refer column-rule-color.
initialSets column-rule to default value.
inheritInherits column-rule value from its parent element.

Examples

In the following examples, we set the width, style, and color for the rule that appears between the columns of the HTML Element with different possible values, using column-rule property.

column-rule with width, style, and color

In the following example, we set the width, style, and color of the rule between the columns.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            column-count: 3;
            column-rule: thick solid red;
        }
    </style>
</head>
<body>
    <p id="p1">This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns.</p>
</body>
</html>

column-rule with width, and style

In the following example, we set the width, and style of the rule between the columns.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            column-count: 3;
            column-rule: thick solid;
        }
    </style>
</head>
<body>
    <p id="p1">This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns.</p>
</body>
</html>

column-rule with style

In the following example, we set only the style of the rule between the columns.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            column-count: 3;
            column-rule: solid;
        }
    </style>
</head>
<body>
    <p id="p1">This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns.</p>
</body>
</html>

column-rule with style, and color

In the following example, we set style, and color of the rule between the columns.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            column-count: 3;
            column-rule: solid #6993ff;
        }
    </style>
</head>
<body>
    <p id="p1">This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns.</p>
</body>
</html>

Conclusion

In this CSS Tutorial, we learned about column-rule property, and how to use this property for HTML Elements, with examples.