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>