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

Thuộc tính column-rule-style định nghĩa kiểu đường kẻ phân cách giữa các cột trong multi-column layout.

Cú pháp

.element {
  column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
}

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;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="demo">
    Văn bản demo cho column-rule-style: dashed. 
    Các kiểu khác: solid, dotted, double, groove, ridge, inset, outset.
  </div>
</body>
</html>

Các kiểu đường kẻ (giống border-style)

Giá trị	Hiển thị
`none`	Không hiển thị (mặc định)
`hidden`	Ẩn (dùng cho conflict resolution)
`dotted`	Chấm chấm ......
`dashed`	Nét đứt - - - - -
`solid`	Nét liền _______
`double`	Hai nét liền =====
`groove`	Hiệu ứng 3D rãnh
`ridge`	Hiệu ứng 3D dọc
`inset`	Hiệu ứng 3D chìm
`outset`	Hiệu ứng 3D nổi

Shorthand: column-rule

.demo {
  column-rule: 2px solid #3498db; /* width style color */
}

Lưu ý

Đường kẻ vẽ ở giữa column-gap
Không làm tăng chiều rộng container
Chỉ hiển thị khi có ít nhất 2 cột
Kết hợp column-rule-color để đổi màu