column-rule শর্টহ্যান্ড প্রোপার্টি দিয়ে কলামের মাঝপথি রেখার প্রস্থ, স্টাইল এবং রঙ একসাথে সেট করা যায়। এটি তিনটি প্রোপার্টির সম্মিলন:
column-rule-width— রেখার প্রস্থcolumn-rule-style— রেখার স্টাইল (solid, dotted, dashed, double, groove, ridge, inset, outset)column-rule-color— রেখার রঙ
সিনট্যাক্স:
column-rule: column-rule-width column-rule-style column-rule-color | initial | inherit;
উদাহরণ ১: শর্টহ্যান্ড ব্যবহার (5px dotted orange)
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 5;
-webkit-column-count: 5; -moz-column-count: 5;
column-gap: normal;
-webkit-column-rule: 5px dotted orange;
-moz-column-rule: 5px dotted orange;
column-rule: 5px dotted orange;
}
</style>
</head>
<body>
<h1>PyTorch</h1>
<div class="demo">PyTorch is defined as an open source machine learning library for Python...</div>
</body>
</html>
উদাহরণ ২: পৃথক প্রোপার্টি ব্যবহার (5px double blue)
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 4; column-gap: normal;
column-rule-width: 5px; column-rule-color: blue; column-rule-style: double;
}
</style>
</head>
<body>
<h1>PyTorch</h1>
<div class="demo">PyTorch is defined as an open source machine learning library for Python...</div>
</body>
</html>
নোট: পুরনো ব্রাউজার সাপোর্টের জন্য -webkit- এবং -moz- প্রিফিক্স ব্যবহার করা হয়েছে। আধুনিক ব্রাউজারগুলিতে অপ্রিফিক্সড ভার্সনই যথেষ্ট।
