Open In App

CSS column-rule-color Property

Improve
Improve
Like Article
Like
Save
Share
Report

The column-rule-color property of CSS is used to change the color of the rule between the column. 

Syntax:

column-rule-color: color | initial | inherit 

Property Values: 

  • color: It is used to set the rule color to any valid CSS color.
  • initial: It is used to set the default color to the rule.
  • inherit: In this the color will be inherited from its parent element.

Example: In this example, we are using the above-explained property.

html




<!DOCTYPE html>
<html>
<head>
    <title> CSS property | column-rule-color </title>
 
    <!-- column-rule-color CSS property -->
    <style>
        p.one {
            column-gap: 50px;
            column-count: 3;
            column-rule-style: solid;
            column-rule-width: 10px;
            column-rule-color: green;
            border: 1px solid black;
            text-align: center;
        }
 
        p.two {
            column-gap: 50px;
            column-count: 3;
            column-rule-style: solid;
            column-rule-width: 10px;
            column-rule-color: #000080;
            border: 1px solid black;
            text-align: center;
        }
 
        p.three {
            column-gap: 50px;
            column-count: 3;
            column-rule-style: solid;
            column-rule-width: 10px;
            column-rule-color: rgb(0, 191, 255);
            border: 1px solid black;
            text-align: center;
        }
 
        p.four {
            column-gap: 50px;
            column-count: 3;
            column-rule-style: solid;
            column-rule-width: 10px;
            column-rule-color: initial;
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
 
<body>
 
    <!-- column-rule-color: green; property -->
    <p class="one">
        Prepare for the Recruitment drive of product
        based companies like Microsoft, Amazon, Adobe,
        etc with a free online placement preparation
        course. The course focuses on various MCQ's
        & Coding question likely to be asked in the
        interviews & make your upcoming placement
        season efficient and successful.
    </p>
 
    <!-- column-rule-color: #000080; property -->
    <p class="two">
        Prepare for the Recruitment drive of product
        based companies like Microsoft, Amazon, Adobe,
        etc with a free online placement preparation
        course. The course focuses on various MCQ's
        & Coding question likely to be asked in the
        interviews & make your upcoming placement
        season efficient and successful.
    </p>
 
    <!-- column-rule-color: rgb(0, 191, 255); property -->
    <p class="three">
        Prepare for the Recruitment drive of product
        based companies like Microsoft, Amazon, Adobe,
        etc with a free online placement preparation
        course. The course focuses on various MCQ's
        & Coding question likely to be asked in the
        interviews & make your upcoming placement
        season efficient and successful.
    </p>
 
    <!-- column-rule-color: initial; property -->
    <p class="four">
        Prepare for the Recruitment drive of product
        based companies like Microsoft, Amazon, Adobe,
        etc with a free online placement preparation
        course. The course focuses on various MCQ's
        & Coding question likely to be asked in the
        interviews & make your upcoming placement
        season efficient and successful.
    </p>
 
</body>
</html>


Output:

 column-rule-color property 

Supported Browsers: The browsers supported by column-rule-color Property are listed below;

  • Google Chrome: 50.0
  • Edge: 12.0
  • Internet Explorer: 10.0
  • Firefox: 52.0
  • Opera: 11.1
  • Safari: 9.0

Reference: Mozilla Developer Network (MDN) 



Last Updated : 13 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads