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:
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)