CSS - column-rule-color Property

Previous
Quiz
Next

CSS column-rule-color property sets the color of the line that is drawn between the columns in a multi-column layout. The column-rule-style must be declared to use this property.

Syntax

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

Property Values

Value Description
color It specifies the color of rule. Different color formats can be used (names,rgb values,hex values,hsl values etc.)
initial This sets the property to its default value.
inherit This inherits the property from the parent element.

Examples of CSS Column Rule Color Property

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

Column Rule Color Property with Color Names

To set the color of the rule, we can specify the color using color names (e.g. red, blue, green etc.). In the following example color names have been used with the column-rule-color property.

Example

<!DOCTYPE html>
<html>

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

      }

      .p1 {
         column-rule-color: red;
      }

      .p2 {
         column-rule-color: blue;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-rule-color property
   </h2>
   <p>
      column-rule-color: Color names( red and blue)
   </p>
   <div class="multicol-col-rule p1">
      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><br/>
   <div class="multicol-col-rule p2">
      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>

Column Rule Color Property with Hexadecimal Values

To set the color of the rule, we can specify the color using hexadecimal values (e.g. #ff0000, #ffff00 etc.). In the following example hexadecimal values have been used with the column-rule-color property.

Example

<!DOCTYPE html>
<html>

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

      }

      .p1 {
         column-rule-color: #ff3300;
      }

      .p2 {
         column-rule-color: #990099;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-rule-color property
   </h2>
   <p>
      column-rule-color: Hex values (#ff3300, #990099)
   </p>
   <div class="multicol-col-rule p1">
      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><br/>
   <div class="multicol-col-rule p2">
      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>

Column Rule Color Property with RGB Values

To set the color of the rule, we can specify the color using rgb values (e.g. rgb(255, 0, 0), rgb(0, 0, 153) etc.). In the following example rgb values have been used with the column-rule-color property.

Example

<!DOCTYPE html>
<html>

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

        }

        .p1 {
            column-rule-color: rgb(0, 179, 89);
        }

        .p2 {
            column-rule-color: rgb(255, 0, 128);
        }
    </style>
</head>

<body>
   <h2>
      CSS column-rule-color property
   </h2>
   <p>
      column-rule-color: RGB Values rgb(0, 179, 89), 
      rgb(255, 0, 128)
   </p>
   <div class="multicol-col-rule p1">
      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><br/>
   <div class="multicol-col-rule p2">
      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>

Column Rule Color Property with HSL Values

To set the color of the rule, we can specify the color using hsl values (e.g. hsl(0, 100%, 50%), hsl(60, 100%, 50%) etc.). In the following example hsl values have been used with the column-rule-color property.

Example

<!DOCTYPE html>
<html>

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

      }

      .p1 {
         column-rule-color: hsl(240, 20%, 50%);
      }

      .p2 {
         column-rule-color: hsl(150, 50%, 40%);
      }
   </style>
</head>

<body>
   <h2>
      CSS column-rule-color property
   </h2>
   <p>
      column-rule-color: HSL Values hsl(240, 20%, 50%), 
      hsl(150, 50%, 40%)
   </p>
   <div class="multicol-col-rule p1">
      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><br/>
   <div class="multicol-col-rule p2">
      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 Chrome Edge Firefox Safari Opera
column-rule-color 50.0 10.0 52.0 9.0 37.0
css_reference.htm
Print Page
Previous
Next
Advertisements