CSS column-rule-color Property

Last Updated : 13 Jun, 2023

The column-rule-color property of CSS is used to change the color of the rule between the column.

Syntax:

column-rule-color: color | initial | inherit

Property Values:

color: It is used to set the rule color to any valid CSS color.
initial: It is used to set the default color to the rule.
inherit: In this the color will be inherited from its parent element.

Example: In this example, we are using the above-explained property.

html

<!DOCTYPE html>
<html>
<head>
    <title> CSS property | column-rule-color </title>

    <!-- column-rule-color CSS property -->
    <style>
        p.one {
            column-gap: 50px;
            column-count: 3;
            column-rule-style: solid;
            column-rule-width: 10px;
            column-rule-color: green;
            border: 1px solid black;
            text-align: center;
        }

        p.two {
            column-gap: 50px;
            column-count: 3;
            column-rule-style: solid;
            column-rule-width: 10px;
            column-rule-color: #000080;
            border: 1px solid black;
            text-align: center;
        }

        p.three {
            column-gap: 50px;
            column-count: 3;
            column-rule-style: solid;
            column-rule-width: 10px;
            column-rule-color: rgb(0, 191, 255);
            border: 1px solid black;
            text-align: center;
        }

        p.four {
            column-gap: 50px;
            column-count: 3;
            column-rule-style: solid;
            column-rule-width: 10px;
            column-rule-color: initial;
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>

<body>

    <!-- column-rule-color: green; property -->
    <p class="one">
        Prepare for the Recruitment drive of product
        based companies like Microsoft, Amazon, Adobe,
        etc with a free online placement preparation
        course. The course focuses on various MCQ's
        & Coding question likely to be asked in the
        interviews & make your upcoming placement
        season efficient and successful.
    </p>

    <!-- column-rule-color: #000080; property -->
    <p class="two">
        Prepare for the Recruitment drive of product
        based companies like Microsoft, Amazon, Adobe,
        etc with a free online placement preparation
        course. The course focuses on various MCQ's
        & Coding question likely to be asked in the
        interviews & make your upcoming placement
        season efficient and successful.
    </p>

    <!-- column-rule-color: rgb(0, 191, 255); property -->
    <p class="three">
        Prepare for the Recruitment drive of product
        based companies like Microsoft, Amazon, Adobe,
        etc with a free online placement preparation
        course. The course focuses on various MCQ's
        & Coding question likely to be asked in the
        interviews & make your upcoming placement
        season efficient and successful.
    </p>

    <!-- column-rule-color: initial; property -->
    <p class="four">
        Prepare for the Recruitment drive of product
        based companies like Microsoft, Amazon, Adobe,
        etc with a free online placement preparation
        course. The course focuses on various MCQ's
        & Coding question likely to be asked in the
        interviews & make your upcoming placement
        season efficient and successful.
    </p>

</body>
</html>