CSS column-rule-style - कॉलम रूल की शैली सेट करें

column-rule-style प्रॉपर्टी मल्टी-कॉलम लेआउट में कॉलम के बीच की विभाजक रेखा (रूल) की शैली निर्धारित करती है। यह border-style के समान मान स्वीकार करती है।

उदाहरण: डैश्ड रूल शैली

<!DOCTYPE html>
<html>
<head>
  <style>
    .demo {
      column-count: 4;
      column-gap: 50px;
      column-rule-color: maroon;
      column-rule-style: dashed;  /* रूल शैली */
      column-rule-width: 2px;
    }
  </style>
</head>
<body>
  <div class="demo">
    यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।
    यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।
    यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।
    यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।
    यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।
    यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है।
  </div>
</body>
</html>

column-rule-style के सभी मान

शॉर्टहैंड: column-rule

column-rule: 2px dashed maroon;  /* width | style | color */
column-rule: 1px solid #ccc;
column-rule: thick double blue;

संपूर्ण कॉलम स्टाइलिंग

.multi-column {
  column-count: 3;
  column-gap: 2rem;
  column-rule: 1px solid #e0e0e0;
  column-fill: balance;  /* कॉलम ऊंचाई संतुलित करें */
}