CSS column-rule-width Property

Last Updated : 26 Aug, 2024

The column-rule-width property in CSS is used to change the width of the column rule i.e., the vertical lines between the columns.

Syntax:

column-rule-width: length|thin|medium|thick|initial|inherit;

Default Value: medium

Property Values:

thin: It is used to set a thin rule between the columns.
medium: It is used to create a medium width rule between the columns. It is the default width.
thick: It creates a thick width rule between the columns.
length: It is used to set the width by length. It does not take a negative value.
initial: It is used to set column-rule-width property to its default value.
inherit: This property is inherited from its parent.

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

html

<!DOCTYPE html>
<html>
<head>
    <title>
        column-rule-width property
    </title>

    <!-- column-rule-width CSS property -->
    <style>
        .length {
            column-count: 3;
            column-rule: solid green;
            column-gap: 40px;
            column-rule-width: 10px;
            text-align: justify;
        }

        .thin {
            column-count: 3;
            column-rule: solid green;
            column-gap: 40px;
            column-rule-width: thin;
            text-align: justify;
        }

        .thick {
            column-count: 3;
            column-rule: solid green;
            column-gap: 40px;
            column-rule-width: thick;
            text-align: justify;
        }

        .medium {
            column-count: 3;
            column-rule: solid green;
            column-gap: 40px;
            column-rule-width: medium;
            text-align: justify;
        }

        .initial {
            column-count: 3;
            column-rule: solid green;
            column-gap: 40px;
            column-rule-width: initial;
            text-align: justify;
        }

        h2 {
            text-align: center;
        }
    </style>
</head>

<body>
    <!-- column-rule-width: length; property -->
    <h2>column-rule-width: length;</h2>
    <div class="length">
        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>

    <!-- column-rule-width: thin; property -->
    <h2>column-rule-width: thin;</h2>
    <div class="thin">
        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>

    <!-- column-rule-width: thick; property -->
    <h2>column-rule-width: thick;</h2>
    <div class="thick">
        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>

    <!-- column-rule-width: medium; property -->
    <h2>column-rule-width: medium;</h2>
    <div class="medium">
        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>

    <!-- column-rule-width: initial; property -->
    <h2>column-rule-width: initial;</h2>
    <div class="initial">
        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:

Supported Browsers: The browser supported by column-rule-width property are listed below:

Google Chrome 50.0 and above
Edge 12.0 and above
Internet Explorer 10.0 and above
Firefox 52.0 and above
Safari 9.0 and above
Opera 11.1 and above

Husban

Improve

CSS column-rule-width Property

Thank You!