Thiết lập quy tắc cột (Column Rules) trong CSS3

Để thiết lập quy tắc (đường kẻ) giữa các cột, sử dụng shorthand column-rule, cho phép thiết lập:

column-rule-width: độ rộng đường kẻ giữa cột
column-rule-style: kiểu đường kẻ giữa cột
column-rule-color: màu đường kẻ giữa cột

Giá trị shorthand:

column-rule: column-rule-width column-rule-style column-rule-color | initial | inherit;

Ví dụ 1: Shorthand 5px dotted orange

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
  column-count: 5;
  -webkit-column-count: 5;
  -moz-column-count: 5;
  -webkit-column-gap: normal;
  -moz-column-gap: normal;
  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 là thư viện machine learning open source cho Python. Dùng cho NLP.
  Phát triển bởi Facebook AI Research, và Uber's Pyro xây dựng trên nó.
  Ban đầu Hugh Perkins phát triển làm Python wrapper cho LusJIT dựa trên Torch.
  Có 2 biến thể PyTorch. PyTorch redesign và implement Torch trong Python
  chia sẻ core C libraries cho backend. GPU acceleration và extensibility
  từ Lua-based Torch được giữ lại.
</div>
</body>
</html>

Kết quả

Ví dụ 2: Tách riêng các thuộc tính

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
  column-count: 4;
  -webkit-column-count: 4;
  -moz-column-count: 4;
  -webkit-column-gap: normal;
  -moz-column-gap: normal;
  column-gap: normal;
  -webkit-column-rule-width: 5px;
  -moz-column-rule-width: 5px;
  column-rule-width: 5px;
  -webkit-column-rule-color: blue;
  -moz-column-rule-color: blue;
  column-rule-color: blue;
  -webkit-column-rule-style: double;
  -moz-column-rule-style: double;
  column-rule-style: double;
}
</style>
</head>
<body>
<h1>PyTorch</h1>
<div class="demo">
  PyTorch là thư viện machine learning open source cho Python. Dùng cho NLP.
  Phát triển bởi Facebook AI Research, và Uber's Pyro xây dựng trên nó.
  Ban đầu Hugh Perkins phát triển làm Python wrapper cho LusJIT dựa trên Torch.
  Có 2 biến thể PyTorch. PyTorch redesign và implement Torch trong Python
  chia sẻ core C libraries cho backend. GPU acceleration và extensibility
  từ Lua-based Torch được giữ lại.
</div>
</body>
</html>

Kết quả

Kiểu đường kẻ (column-rule-style):

• none, hidden, dotted, dashed, solid, double
• groove, ridge, inset, outset