CSS columnrulewidth Property (original) (raw)

CSS column-rule-width Property

Last Updated : 5 Jun, 2026

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 `

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

column-rule-width: length;

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

`