Cách thiết lập thuộc tính đường kẻ cột (column rule) với JavaScript

Thuộc tính columnRule là viết tắt (shorthand) cho phép thiết lập cùng lúc ba thuộc tính: column-rule-width, column-rule-style và column-rule-color.

Ví dụ minh họa

Nhấn nút để tạo 4 cột với đường kẻ viền 2px, kiểu outset, màu đỏ:

<!DOCTYPE html>
<html>
<body>
  <p>Nhấn nút bên dưới để tạo 4 cột</p>
  <button onclick="display()">Tạo cột</button>
  <div id="myID">
    Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.
    Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.
    Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.
    Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.
    Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.
    Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.
    Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.
  </div>
  <script>
    function display() {
      document.getElementById("myID").style.columnCount = "4";
      document.getElementById("myID").style.columnRule = "2px outset red";
    }
  </script>
</body>
</html>

Cú pháp columnRule

columnRule: <width> <style> <color>

• width: thin, medium, thick hoặc giá trị px
• style: solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden
• color: Tên màu, hex, rgb, rgba, hsl, hsla