CSS column-rule-style Property

The column-rule-style property in CSS is used to set the style of the column rule between the columns on a multi-column layout.

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: It is the default value and is used to specify no rule between the columns.
hidden: It defines the hidden rule between the columns.
dotted: It defines the dotted rule between the columns.
dashed: It defines the dashed rule between the columns.
solid: It defines the solid rule between the columns.
double: It defines the double rule between the columns.
groove: It defines a 3D grooved rule. The effect depends on the width and color values.
ridge: It defines a 3D ridged rule. The effect depends on the width and color values.
inset: It defines a 3D inset rule. The effect depends on the width and color values.
outset: It defines a 3D outset rule. The effect depends on the width and color values.
initial: It sets the value to its default value.
inherit: The property inherited from its parent element.

Example 1: Here is the example of the above-explained property.

html

<!DOCTYPE html>

<html>

<head>

    <title>

        CSS | column-rule-style Property

    </title>

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

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

Output: Example 2: Here is the example of the above-explained property.

html

<!DOCTYPE html>

<html>

<head>

    <title>

        CSS | column-rule-style Property

    </title>

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

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

Output: Example 3: Here is the example of the above-explained property.

html

<!DOCTYPE html>

<html>

<head>

    <title>

        CSS | column-rule-style Property

    </title>

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

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