CSS - column-rule Property

Quiz

CSS column-rule property is a shorthand property for defining values to properties column-rule-width, column-rule-style and column-rule-color that set the width, style, and color of the line that is drawn between the columns in a multiple-column layout.

Syntax

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

Property Values

Value	Description
column-rule-width	It is used for setting the width of the rule between columns. Default is medium.
column-rule-style	It is used for setting the style of the rule between columns. Default is none.
column-rule-color	It is used for setting the color of the rule between columns. Default is color of the element.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Column Rule Property

The following examples explain the column-rule property with different values.

Defining All Values of Column Rule Property

To define the width, style and color of the rule in one single statement, we use the column-rule property. Three values have to be given. First value for width, second for style and third for color. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .multicol-col-rule {
         column-count: 3;
         column-gap: 40px;
         column-rule: 5px dashed green;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-rule property
   </h2>
   <div class="multicol-col-rule">
      TutorialsPoint is a versatile online educational 
      platform offering free tutorials across various fields
      such as programming, web development, data science, and
      more. It features a wealth of resources including 
      step-by-step guides, practical examples, and interactive
      tools designed to facilitate learning for beginners and
      advanced users.The platform also provides coding practice
      exercises, quizzes, and detailed explanations to 
      reinforce understanding. With its user-friendly 
      interface and diverse content, TutorialsPoint is a 
      valuable resource for anyone looking to expand their
      knowledge and skills.
   </div>
</body>

</html>

Constituent Properties of Column Rule Property

The column-rule property is a combination of properties column-rule-width, column-rule-style and column-rule-color. The following example shows how these properties can be used together to show the column-rule property effect.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .multicol-col-rule {
         column-count: 3;
         column-gap: 40px;
         column-rule-width: 5px;
         column-rule-style: solid;
         column-rule-color: lightcoral;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-rule property
   </h2>
   <div class="multicol-col-rule">
      TutorialsPoint is a versatile online educational
      platform offering free tutorials across various fields
      such as programming, web development, data science, and
      more. It features a wealth of resources including
      step-by-step guides, practical examples, and interactive
      tools designed to facilitate learning for beginners and
      advanced users. The platform also provides coding practice
      exercises, quizzes, and detailed explanations to
      reinforce understanding. With its user-friendly
      interface and diverse content, TutorialsPoint is a
      valuable resource for anyone looking to expand their
      knowledge and skills.
   </div>
</body>

</html>

Supported Browsers

Property
column-rule	50.0	10.0	52.0	9.0	37.0

css_reference.htm

Print Page