CSS | column-rule Property

The column-rule property in CSS is used to specify the width, style, and color of the rules between the columns.

Syntax:

column-rule: column-rule-width column-rule-style column-rule-color|
initial|inherit;

Property Values:



  • column-rule-width: This value is used to set the width of the rule between the columns. The default value of this property-value is medium.
  • column-rule-style: This value is used to set the style of the rule between columns. The default value of this property-value is none.
  • column-rule-color: This value is used to set the color of the rule between columns. The default value of this property value is the color of the element.
  • initial: This value is used to set default value of this column-rule property.
  • inherit: This value tells the column-rule property to inherit the property from its parent.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <title>The column-rule Property</title>
      
    <style
    .gfg {
        -webkit-column-count: 3; 
        -moz-column-count: 3
        column-count: 3;
          
        -webkit-column-gap: 40px; 
        -moz-column-gap: 40px; 
        column-gap: 40px;
          
        -webkit-column-rule: 4px double #ff00ff; 
        -moz-column-rule: 4px double #ff00ff; 
        column-rule: 4px double #ff00ff;
    }
      
    h1 {
        color:green;
    }
    h1, h2 {
        text-align:center;
    }
    </style>
</head>
<body>
    <h1>
        GeeksforGeeks
    </h1>
    <h2>
        The column-rule Property
    </h2>
      
    <p>
        The column-rule property sets the width, style, 
        and color of the rule between the columns of 
        the element:
    </p>
      
    <div class="gfg">
        The course is designed for students 
        as well as working professionals to prepare 
        for coding interviews. This course is going 
        to have coding questions from school level 
        to the level needed for product based companies 
        like Amazom, Microsoft, Adobe, etc.
    </div>
</body>
</html>                    

chevron_right


Output:

Supported Browsers: The browsers supported by column-rule Property are listed below;

  • Google Chrome: 50.0, 4.0 -webkit-
  • Internet Explorer: 10.0
  • Firefox: 52.0, 2.0 -moz-
  • Opera: 37.0, 15.0 -webkit-, 11.1
  • Safari: 9.0, 3.1 -webkit-


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.