Skip to content
Related Articles

Related Articles

CSS | column-rule-color Property

View Discussion
Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 02 Aug, 2022
View Discussion
Improve Article
Save Article

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

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) Please comment below, if you found any errors or, have suggestions for improvements.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!