CSS column-rule-color प्रॉपर्टी मल्टी-कॉलम लेआउट में कॉलम के बीच खींची जाने वाली रेखा (नियम/रूल) का रंग निर्दिष्ट करती है। यह column-rule-style (रेखा शैली) और column-rule-width (चौड़ाई) के साथ संयोजन में काम करती है।
उदाहरण
नीचे दिए गए उदाहरण में, 4 कॉलम लेआउट में कॉलम के बीच नारंगी रंग की डैश्ड रेखा (column-rule-color: orange, column-rule-style: dashed) खींची गई है।
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 4;
column-gap: 50px;
column-rule-color: orange;
column-rule-style: dashed;
}
</style>
</head>
<body>
<div class="demo">
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text.
</div>
</body>
</html>
कॉलम नियम प्रॉपर्टीज:
column-rule-width: रेखा की चौड़ाईcolumn-rule-style: रेखा शैली (solid,dashed,dotted,double, आदि)column-rule-color: रेखा का रंगcolumn-rule: शॉर्टहैंड (width style color)
पूर्वापेक्षा: column-count या column-width सेट होना चाहिए (कम से कम 2 कॉलम)।
