Skip to content
Related Articles

Related Articles

CSS | column-rule Property
  • Last Updated : 29 Apr, 2021

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
 

html




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

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :