CSS column-rule-style

CSS column-rule-style Property

CSS column-rule-style property specifies the style of the rule/line between the columns, like solid, hidden, dashed, etc.

The syntax to specify a value for column-rule-style property is

</>

Copy

column-rule-style: Value;

The following table gives the possible values that could be given to column-rule-color property.

Value	Description	Examples
none	No rule between columns.	column-rule-style: none;
hidden	Rule is hidden between columns.	column-rule-style: hidden;
dotted	A dotted line between columns.	column-rule-style: dotted;
dashed	A dashed line between columns.	column-rule-style: dashed;
solid	A solid line between columns.	column-rule-style: solid;
double	A double line between columns.	column-rule-style: double;
groove	A grooved 3D appearing line between columns.	column-rule-style: groove;
ridge	A ridged 3D appearing line between columns.	column-rule-style: ridge;
inset	An inset 3D appearing line between columns.	column-rule-style: inset;
outset	An outset 3D appearing line between columns.	column-rule-style: outset;
initial	Sets column-rule-color to default value.	column-rule-color: initial;
inherit	Inherits column-rule-color value from its parent element.	column-rule-color: inherit;

Note: For the column-rule-color value to take effect, column-rule-style property has be set for the element.

Examples

In the following examples, we set the style for the rule that appears between the columns of the HTML Element with different possible values, using column-rule-style property.

column-rule-style: dotted;

In the following example, we set the style of rule between the columns with dotted.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            column-count: 3;
            column-rule-style: dotted;
        }
    </style>
</head>
<body>
    <p id="p1">This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns.</p>
</body>
</html>

column-rule-style: dashed;

In the following example, we set the style of rule between the columns with dashed.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            column-count: 3;
            column-rule-style: dashed;
        }
    </style>
</head>
<body>
    <p id="p1">This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns.</p>
</body>
</html>

column-rule-style: solid;

In the following example, we set the style of rule between the columns with solid.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            column-count: 3;
            column-rule-style: solid;
        }
    </style>
</head>
<body>
    <p id="p1">This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns.</p>
</body>
</html>

column-rule-style: double;

In the following example, we set the style of rule between the columns with double.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            column-count: 3;
            column-rule-style: double;
        }
    </style>
</head>
<body>
    <p id="p1">This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns.</p>
</body>
</html>

column-rule-style: groove;

In the following example, we set the style of rule between the columns with groove.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            column-count: 3;
            column-rule-style: groove;
        }
    </style>
</head>
<body>
    <p id="p1">This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns.</p>
</body>
</html>

column-rule-style: ridge;

In the following example, we set the style of rule between the columns with ridge.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            column-count: 3;
            column-rule-color: yellow;
            column-rule-style: ridge;
        }
    </style>
</head>
<body>
    <p id="p1">This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns.</p>
</body>
</html>

column-rule-style: inset;

In the following example, we set the style of rule between the columns with inset.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            column-count: 3;
            column-rule-color: yellow;
            column-rule-style: inset;
        }
    </style>
</head>
<body>
    <p id="p1">This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns.</p>
</body>
</html>

column-rule-style: outset;

In the following example, we set the style of rule between the columns with outset.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            column-count: 3;
            column-rule-color: yellow;
            column-rule-style: outset;
        }
    </style>
</head>
<body>
    <p id="p1">This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns. This is a paragraph with text to appear in columns.</p>
</body>
</html>

Conclusion

In this CSS Tutorial, we learned about column-rule-style property, and how to use this property for HTML Elements, with examples.

TutorialKart

CSS column-rule-style