CSS column-rule-width Property

The column-rule-width property in CSS is used to specify the width of the line displayed between columns in a multi-column layout.

Controls the thickness of the column separator line.
Works with column-rule-style and column-rule-color to customize column rules.
Accepts predefined values (thin, medium, thick) or a specific length value.

Syntax:

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

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.

html

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

<!--Driver Code Ends-->

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

<!--Driver Code Starts-->
</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>
<!--Driver Code Ends-->

CSS column-rule-width Property

Explore