Thuộc tính column-rule-width trong CSS

Thuộc tính column-rule-width thiết lập độ dày của đường kẻ phân cách giữa các cột trong bố cục đa cột (multi-column layout).

Cú pháp

.element {
  column-rule-width: thin | medium | thick | <length>;
}

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    .demo {
      column-count: 4;
      column-gap: 50px;
      column-rule-color: maroon;
      column-rule-style: dashed;
      column-rule-width: 5px;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="demo">
    Văn bản demo cho column-rule-width. Đường kẻ giữa các cột có độ dày 5px, 
    màu maroon, kiểu dashed. Khoảng cách giữa cột là 50px.
  </div>
</body>
</html>

Các giá trị width

Giá trị	Mô tả
`thin`	~1px (tùy trình duyệt)
`medium` (mặc định)	~3px
`thick`	~5px
`<length>`	Cụ thể: 1px, 2px, 0.1em...

Shorthand: column-rule

.demo {
  column-rule: 5px dashed maroon; /* width style color */
  /* Tương đương: */
  column-rule-width: 5px;
  column-rule-style: dashed;
  column-rule-color: maroon;
}

Tóm tắt các thuộc tính Multi-column

Thuộc tính	Chức năng
`columns`	Shorthand: column-width + column-count
`column-count`	Số cột tối đa
`column-width`	Chiều rộng tối thiểu cột
`column-gap`	Khoảng cách giữa cột
`column-rule`	Đường kẻ (shorthand)
`column-span`	Phần tử trải qua cột
`column-fill`	Cân bằng nội dung (auto/balance)