CSS columnrulecolor Property (original) (raw)

CSS column-rule-color Property

Last Updated : 5 Jun, 2026

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 `

CSS property | column-rule-color

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

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