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:

column-rule-style: none | double | groove | ridge | inset | hidden |
                   dotted | dashed | solid | outset | initial | inherit;

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 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | column-rule-style Property
    </title>
<!--Driver Code Ends-->

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

<!--Driver Code Starts-->
</head>

<body>
    <h1 style="text-align:center;color:green;">
        GeeksforGeeks
    </h1>

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

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

html 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | column-rule-style Property
    </title>
<!--Driver Code Ends-->

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

<!--Driver Code Starts-->
</head>

<body>
    <h1 style="text-align:center;color:green">
        GeeksforGeeks
    </h1>

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

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

html 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | column-rule-style Property
    </title>
<!--Driver Code Ends-->

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

<!--Driver Code Starts-->
</head>

<body>
    <h1 style="text-align:center;color:green">
        GeeksforGeeks
    </h1>

    <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>
</body>
</html>
<!--Driver Code Ends-->
Comment

Explore