CSS | column-rule-color Property

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.



My Personal Notes arrow_drop_up

Student, BCA

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.