CSS column-rule-width Property

Q: How do I create a thin column rule?

To create a thin column rule, you can set: column-rule-width: 1px; or use the keyword thin: column-rule-width: thin; .

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.

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

CSS column-rule-width Property – FAQs

What does the column-rule-width property do in CSS?

The column-rule-width property in CSS specifies the width (thickness) of the line drawn between columns in a multi-column layout. It controls how thick the dividing line appears.

What units can be used with column-rule-width?

You can use units like px, em, rem, and keywords such as thin, medium, and thick for the column-rule-width property.

How do I create a thin column rule?

To create a thin column rule, you can set: column-rule-width: 1px; or use the keyword thin: column-rule-width: thin; .

Can I set different widths for each column rule?

No, the column-rule-width property applies the same width to all column dividers in a multi-column layout. The rule is consistent across all columns.

What happens if column-rule-width is not defined?

If column-rule-width is not defined, the default value is medium, which is generally equivalent to about 3px. The column rule will be visible unless set to none.