Tạo các loại đường phân cách (dividers) với CSS

Sử dụng <hr> với các class CSS khác nhau để tạo nhiều kiểu đường phân cách.

Ví dụ

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<head>
  <style>
    body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      padding: 20px;
    }
    hr {
      border: none;
      height: 3px;
      margin: 20px 0;
    }
    .dashed { 
      background: repeating-linear-gradient(90deg, rgb(216, 22, 22), rgb(216, 22, 22) 10px, transparent 10px, transparent 20px);
    }
    .dotted { 
      background: radial-gradient(circle, rgb(8, 11, 167) 40%, transparent 40%) 0 0 / 8px 8px repeat-x;
    }
    .solid { background: rgb(18, 167, 38); }
    .rounded { 
      background: rgb(200, 255, 0);
      border-radius: 5px;
    }
    .double { 
      height: 6px;
      background: linear-gradient(rgb(219, 46, 196), rgb(219, 46, 196)) center / 100% 40% no-repeat;
      border-top: 3px double rgb(219, 46, 196);
    }
  </style>
</head>
<body>
  <h1>Các Loại Dividers</h1>
  <p>Dashed</p> <hr class="dashed">
  <p>Dotted</p> <hr class="dotted">
  <p>Solid</p> <hr class="solid">
  <p>Rounded</p> <hr class="rounded">
  <p>Double</p> <hr class="double">
</body>
</html>

Kết quả

5 loại divider: nét đứt đỏ, chấm xanh dương, liền xanh lá, bo tròn vàng, kép hồng - mỗi loại cách nhau bởi text label.

Mẹo hiện đại

Dùng background + gradient thay vì border để kiểm soát chính xác kích thước, khoảng cách chấm/nét đứt.