CSS column-rule-color Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The column-rule-color property controls the color used for the dividing line drawn between columns inside a multi-column container. It does not create or change the presence of a rule by itself - it only defines the visual color of that divider when a rule is actually drawn. Visually, this property is used purely as a decorative stroke between the flow of columnized content, so changing it affects only the appearance of the separator, not the flow or layout of the content inside the columns.

When working with column rules you normally use column-rule-style and column-rule-width together: the style and width control whether a rule is rendered and how thick or patterned it is, while column-rule-color supplies the color for whatever rule exists. It also pairs with the shorthand column-rule, which can set color, style and width in a single declaration. The visible effect of the color will also depend on spacing set by column-gap because the rule sits in the gap region between columns; adjusting gap and width together helps you get the desired visual balance.

In practical usage, treat column-rule-color as a visual finishing touch: choose colors that maintain sufficient contrast with column backgrounds and text, and be mindful that the rule is a paint-layer decoration rather than an element you can target in the DOM. Because it’s part of the multi-column visual formatting, the rule is repeated for each set of columns produced by the element’s layout; it will visually appear where the multi-column formatting generates separators, and its impact is primarily aesthetic and compositional rather than structural.

Definition

Initial value: currentColor
Applies to: Multi-column elements
Inherited: No
Computed value: The same as the computed value for the 'color' property
Animatable: No
JavaScript syntax: object.style.columnRuleColor

Interactive Demo

column-rule-color: green;

column-rule-color: #4B7DB4;

column-rule-color: rgb(114, 26, 106);

column-rule-color: currentcolor;

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

column-rule-color: <color>

Values

<color>Is a <color> value representing the color of the rule separating columns.

Example

HTML

<div class="columns-demo" aria-label="Two-column text with colored rule">

    <h2>Column Rule Color Example</h2>

    <div class="multi-column">

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>

        <p>Suspendisse potenti. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor.</p>

        <p>Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel.</p>

    </div>

</div>

CSS

.columns-demo {
    max-width: 800px;
    margin: 40px auto;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.columns-demo h2 {
    margin-bottom: 12px;
}

.multi-column {
    columns: 2 220px;
    column-gap: 24px;
    column-rule-width: 4px;
    column-rule-style: solid;
    column-rule-color: #ff6b6b;
    padding: 16px;
    background: #fffaf0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.multi-column p {
    margin: 0 0 12px;
    text-align: justify;
    line-height: 1.5;
}

/* change the rule color on hover */
.multi-column:hover {
    column-rule-color: #4c8bf5;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS column-rule-color property. Hover over a browser icon to see the version that first introduced support for this CSS property.