Skip to content
Related Articles

Related Articles

CSS | column-rule Property
  • Last Updated : 08 Aug, 2019

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:




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

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-

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.




My Personal Notes arrow_drop_up
Recommended Articles
Page :