Open In App

CSS column-rule Property

Last Updated : 13 Jun, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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 the 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 and above
  • Edge 12.0 and above
  • Internet Explorer: 10.0 and above
  • Firefox: 52.0 and above
  • Opera: 11.1 and above
  • Safari: 9.0 and above


Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads