Skip to content
Related Articles

Related Articles

CSS | column-rule-color Property
  • Difficulty Level : Medium
  • Last Updated : 08 Aug, 2019

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:




<!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, 4.0 -webkit-
  • Internet Explorer: 10.0
  • Firefox: 52.0, 2.0 -moz-
  • Opera: 37.0, 15.0 -webkit-, 11.1
  • Safari: 9.0, 3.1 -webkit-

Reference: Mozilla Developer Network (MDN)

Please comment below, if you found any errors or, have suggestions for improvements.

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :