CSS columnrulestyle Property (original) (raw)

CSS column-rule-style Property

Last Updated : 5 Jun, 2026

The column-rule-style property specifies the style of the line displayed between columns in a multi-column layout.

Defines the appearance of the column separator line.
Supports styles such as solid, dashed, dotted, and double.
Helps improve the visual structure of multi-column content.

**Syntax:

**Property Values: The column-rule-style property contains many values which are listed below:

**none: No column rule is displayed.
**double: Displays a double line.
**groove: Displays a carved 3D groove effect.
**ridge: Displays a raised 3D ridge effect.
**inset: Makes the rule appear embedded into the page.
**hidden: Hides the column rule.
**dotted: Displays a series of dots.
**dashed: Displays a series of short dashes.
**solid: Displays a single solid line.
**outset: Makes the rule appear raised from the page.
**initial: Sets the property to its default value.
**inherit: Inherits the property value from the parent element.

Examples of column-rule-style Property

Different styles of separator lines can be displayed between columns using the column-rule-style property.

Example 1: A dashed line is displayed between the columns using the column-rule-style property.

html `

CSS | column-rule-style Property

<style>
    .geeks {

        /* Chrome, Safari, Opera */
        -webkit-column-count: 3;
        -webkit-column-gap: 35px;
        -moz-column-rule-style: dashed;

        /* Firefox */
        -moz-column-count: 3;
        -moz-column-gap: 35px;
        -moz-column-rule-style: dashed;

        column-count: 3;
        column-gap: 35px;
        column-rule-style: dashed;
    }
</style>

GeeksforGeeks

<div class="geeks">
    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.
</div>

Example 2: A double line is displayed between the columns using the column-rule-style property.

html `

CSS | column-rule-style Property

<style>
    .geeks {

        /* Chrome, Safari, Opera */
        -webkit-column-count: 3;
        -webkit-column-gap: 35px;
        -moz-column-rule-style: double;

        /* Firefox */
        -moz-column-count: 3;
        -moz-column-gap: 35px;
        -moz-column-rule-style: double;

        column-count: 3;
        column-gap: 35px;
        column-rule-style: double;
    }
</style>

GeeksforGeeks

<div class="geeks">
    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.
</div>

Example 3: A groove-style line is displayed between the columns using the column-rule-style property.

html `

CSS | column-rule-style Property

<style>
    .geeks {

        /* Chrome, Safari, Opera */
        -webkit-column-count: 3;
        -webkit-column-gap: 35px;
        -moz-column-rule-style: groove;

        /* Firefox */
        -moz-column-count: 3;
        -moz-column-gap: 35px;
        -moz-column-rule-style: groove;

        column-count: 3;
        column-gap: 35px;
        column-rule-style: groove;
    }
</style>

GeeksforGeeks

<div class="geeks">
    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.
</div>