CSS column-rule-color Property

CSS column-rule-color property specifies the color of the rule between the columns of a HTML Element.

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

</>
Copy
column-rule-color: Value;

The following table gives the possible values that could be given to column-rule-color property.

ValueDescriptionExamples
ColorA valid CSS color value. Refer CSS Color Values.column-rule-color: red;
column-rule-color: #00ff00;
column-rule-color: rgb(22, 255, 120);
initialSets column-rule-color to default value.column-rule-color: initial;
inheritInherits column-rule-color value from its parent element.column-rule-color: inherit;

Note: For the column-rule-color value to take effect, column-rule-style property has be set for the element.

Examples

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

column-rule-color set to Color Name

In the following example, we set the color of the rule between the columns with red.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            column-count: 3;
            column-rule-style: solid;
            column-rule-color: 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-color set to Hex Value

In the following example, we set the color of the rule between the columns with a hex value of #55aa33.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            column-count: 3;
            column-rule-style: solid;
            column-rule-color: #55aa33;
        }
    </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-color property, and how to use this property for HTML Elements, with examples.