CSS column-rule-style Property

Description

The column-rule-style property determines the visual appearance of the dividing rule that is drawn between columns in a multi-column layout. It is a presentation-only setting: it affects how the separator line looks, not the underlying column sizing or flow. Because it targets the rule itself rather than the column boxes, it is typically used to give readers a clear visual separation between columnized content without changing spacing or layout behavior.

In practice you rarely use column-rule-style by itself; it is most often combined with the other column-rule-related properties or the shorthand to produce the complete divider effect. For example, authors commonly pair it with column-rule-width and column-rule-color, or set all three at once using the column-rule shorthand. If the rule has no effective width or is rendered transparent, the style becomes visually irrelevant - the rule will not be seen even if a style is specified.

How the rule is rendered also depends on the multi-column context. The presence and placement of the rule relate to the way columns are defined (for example via the columns property) and the size of the gap between them (see column-gap). Some layout scenarios - such as elements that span across columns or fragmentation points created by column breaks - will affect where rules are drawn or whether they appear at all, so authors should check rule placement in the kinds of content flows they create.

From a design viewpoint, column-rule-style is a subtle but powerful typographic tool: it can reinforce structure, guide the eye across reading rhythms, and improve scannability in dense, multi-column content. Because it is a visual embellishment, you should consider contrast and printing contexts (where thin decorative rules may disappear) and test with the surrounding backgrounds and content so the rule remains an aid rather than a distraction.

Definition

Initial value: none
Applies to: Multi-column elements
Inherited: No
Computed value: Specified value
Animatable: No
JavaScript syntax: object.style.columnRuleStyle

Interactive Demo

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-style: <border-style>

Values

<border-style>Is a keyword defined by border-style describing the style of the rule. The styling must be interpreted as in the collapsing border model. Values are: none, hidden, dotted, dashed, solid, double, groove, ridge, inset and outset.

Example

HTML

<div class="wrapper">

    <div class="box">

        <h3>column-rule-style: solid</h3>

        <div class="columns solid">

            <p>

                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat,

                mauris at placerat facilisis, urna justo ultricies nunc, vitae volutpat

                augue nisl sed lectus. Integer vitae lacus nec metus vestibulum

                pellentesque. Curabitur non dolor vitae sapien tristique aliquam.

            </p>

        </div>

    </div>



    <div class="box">

        <h3>column-rule-style: dashed</h3>

        <div class="columns dashed">

            <p>

                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat,

                mauris at placerat facilisis, urna justo ultricies nunc, vitae volutpat

                augue nisl sed lectus. Integer vitae lacus nec metus vestibulum

                pellentesque. Curabitur non dolor vitae sapien tristique aliquam.

            </p>

        </div>

    </div>



    <div class="box">

        <h3>column-rule-style: dotted</h3>

        <div class="columns dotted">

            <p>

                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat,

                mauris at placerat facilisis, urna justo ultricies nunc, vitae volutpat

                augue nisl sed lectus. Integer vitae lacus nec metus vestibulum

                pellentesque. Curabitur non dolor vitae sapien tristique aliquam.

            </p>

        </div>

    </div>



    <div class="box">

        <h3>column-rule-style: double</h3>

        <div class="columns double">

            <p>

                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat,

                mauris at placerat facilisis, urna justo ultricies nunc, vitae volutpat

                augue nisl sed lectus. Integer vitae lacus nec metus vestibulum

                pellentesque. Curabitur non dolor vitae sapien tristique aliquam.

            </p>

        </div>

    </div>

</div>

CSS

/* Layout and base styles */
* {
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background: #f7fafc;
    color: #1a202c;
    padding: 24px;
}

/* Grid of examples */
.wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.box {
    background: #ffffff;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.1);
}

h3 {
    margin: 0 0 10px 0;
    font-size: 1rem;
}

/* Column container  -  common settings */
.columns {
    column-count: 2;
    column-gap: 20px;
    column-rule-width: 6px;      /* width of the rule between columns */
    column-rule-color: #2b6cb0;  /* default color */
    height: 160px;
    overflow: auto;
    padding-right: 6px;
}

.columns p {
    margin: 0;
    line-height: 1.5;
}

/* Different rule styles demonstrated */
.columns.solid {
    column-rule-style: solid;
}

.columns.dashed {
    column-rule-style: dashed;
    column-rule-color: #d53f8c;
}

.columns.dotted {
    column-rule-style: dotted;
    column-rule-color: #2f855a;
    column-rule-width: 4px;
}

.columns.double {
    column-rule-style: double;
    column-rule-color: #d69e2e;
    column-rule-width: 8px;
}

Result

Editor

Browser Support

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