Skip to content
Related Articles

Related Articles

CSS | column-rule-width Property
  • Last Updated : 06 Feb, 2019

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;

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 takes 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:




<!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, 4.0 -webkit-
  • Internet Explorer 10.0
  • Firefox 52.0, 2.0 -moz-
  • Safari 9.0, 3.1 -webkit-
  • Opera 37.0, 15.0 -webkit-, 11.1



My Personal Notes arrow_drop_up
Recommended Articles
Page :