Tạo kiểu cho thẻ hr (đường kẻ ngang) với CSS

Thẻ <hr> mặc định chỉ là một đường kẻ đơn giản. Với CSS, bạn có thể tạo nhiều kiểu đường kẻ khác nhau:

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;
      margin: 20px;
    }
    hr{
      margin-bottom: 20px;
      border: none;
      height: 5px;
    }
    .solid { background: rgb(16, 2, 141); }
    .dashed { 
      background: repeating-linear-gradient(
        90deg, rgb(190, 13, 146), rgb(190, 13, 146) 10px, 
        transparent 10px, transparent 20px
      );
    }
    .double { 
      background: linear-gradient(rgb(22, 145, 11), rgb(22, 145, 11)) center / 100% 40% no-repeat;
      border-top: 5px double rgb(22, 145, 11);
    }
    .dotted { 
      background: radial-gradient(circle, rgb(200, 255, 0) 50%, transparent 50%) 
        0 0 / 10px 10px repeat-x;
    }
    .round { 
      background: rgb(35, 196, 142);
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <h1 style="text-align: center;">Ví dụ Tạo Kiểu Cho HR</h1>
  <hr class="solid">
  <hr class="dashed">
  <hr class="double">
  <hr class="dotted">
  <hr class="round">
</body>
</html>

Kết quả

5 đường kẻ ngang với các kiểu: liền mạch (solid), nét đứt (dashed), kép (double), chấm (dotted), bo tròn (round) - mỗi loại một màu sắc khác nhau.

Lưu ý

Cách hiện đại dùng background và gradient thay vì border để kiểm soát tốt hơn giao diện, đặc biệt là kiểu chấm và nét đứt.