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:
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:
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.
Please Login to comment...