CSS column-rule शॉर्टहैंड से कॉलम नियम की सभी प्रॉपर्टीज एक साथ सेट करें

CSS column-rule शॉर्टहैंड प्रॉपर्टी column-rule-width, column-rule-style, और column-rule-color तीनों को एक साथ सेट करती है। यह मल्टी-कॉलम लेआउट में कॉलम के बीच की रेखा को परिभाषित करने का संक्षिप्त तरीका है।

उदाहरण

नीचे दिए गए उदाहरण में, column-rule: 2px dotted orange शॉर्टहैंड का उपयोग करके 2px चौड़ी, नारंगी, डॉटेड कॉलम नियम सेट की गई है।

<!DOCTYPE html>
<html>
<head>
  <style>
    .demo {
      column-count: 4;
      column-gap: 50px;
      column-rule: 2px dotted orange;
    }
  </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.
    This is demo text. This is demo text. This is demo text.
    This is demo text.
  </div>
</body>
</html>

column-rule सिंटैक्स: column-rule: <width> <style> <color>

• width: thin, medium, thick, या लंबाई (2px)
• style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
• color: कोई भी वैध CSS रंग

व्यक्तिगत प्रॉपर्टीज भी उपलब्ध: column-rule-width, column-rule-style, column-rule-color।