CSS column-rule-width

CSS column-rule-width Property

CSS column-rule-width property specifies the width of the rule between the columns of a HTML Element.

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

</>

Copy

column-rule-width: Value;

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

Value	Description	Examples
medium	A medium stroked rule. [Default Value]	column-rule-width: medium;
thin	A thin stroked rule.	column-rule-width: thin;
thick	A thick stroked rule.	column-rule-width: thick;
Length	A valid length value in CSS Length Units.	column-rule-width: 5px; column-rule-width: 0.2em; column-rule-width: 1%;
initial	Sets column-rule-width to default value.	column-rule-width: initial;
inherit	Inherits column-rule-width value from its parent element.	column-rule-width: inherit;

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

Examples

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

column-rule-width: medium;

In the following example, we set the width of the rule between the columns with medium.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            column-count: 3;
            column-rule-style: solid;
            column-rule-width: medium;
        }
    </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-width: thin;

In the following example, we set the width of the rule between the columns with thin.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            column-count: 3;
            column-rule-style: solid;
            column-rule-width: thin;
        }
    </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-width: thick;

In the following example, we set the width of the rule between the columns with thick.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            column-count: 3;
            column-rule-style: solid;
            column-rule-width: thick;
        }
    </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-width set with a Length

In the following example, we set the width of the rule between the columns with 20px.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            column-count: 3;
            column-rule-style: solid;
            column-rule-width: 20px;
        }
    </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-width property, and how to use this property for HTML Elements, with examples.

TutorialKart

CSS column-rule-width