CSS column-rule-color Property

The column-rule-color property in CSS is used to specify the color of the line displayed between columns in a multi-column layout.

Controls the color of the column separator line.
Works with column-rule-style and column-rule-width to customize column rules.
Accepts color values such as color names, hexadecimal codes, RGB, or HSL values.

Syntax:

column-rule-color: color | initial | inherit

Property Values:

The color property in CSS is used to define the text color of an element.

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.

html

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

    <!-- column-rule-color CSS property -->
<!--Driver Code Ends-->

    <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>

<!--Driver Code Starts-->
</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>
<!--Driver Code Ends-->

CSS column-rule-color Property

Explore