CSS column-rule Property

Last Updated : 5 Jun, 2026

The column-rule property is a shorthand CSS property used to set the width, style, and color of the line displayed between columns in a multi-column layout.

  • Combines column-rule-width, column-rule-style, and column-rule-color into a single declaration.
  • Simplifies the styling of column separator lines.
  • Allows multiple column rule properties to be defined in one statement.

Syntax: 

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

Property Values: 

  • column-rule-width: Specifies the width of the column rule.
  • column-rule-style: Specifies the style of the column rule.
  • column-rule-color: Specifies the color of the column rule.
  • initial: Sets the property to its default value.
  • inherit: Inherits the property value from the parent element.
html 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
    <title>The column-rule Property</title>
<!--Driver Code Ends-->

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

<!--Driver Code Starts-->
</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>
<!--Driver Code Ends-->
Comment

Explore