Open In App

CSS column-rule-width Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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


Last Updated : 13 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads