Thiết lập kiểu viền dưới với CSS

Thuộc tính border-bottom-style

Để thiết lập kiểu đường viền dưới cho phần tử, sử dụng thuộc tính border-bottom-style. Các giá trị phổ biến: dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    p.dotted { border-bottom-style: dotted; }
    p.double { border-bottom-style: double; }
    p.dashed { border-bottom-style: dashed; }
    p.solid  { border-bottom-style: solid; }
    p.inset  { border-bottom-style: inset; }
    p.outset { border-bottom-style: outset; }
  </style>
</head>
<body>
  <p class="dotted">Viền dưới kiểu chấm.</p>
  <p class="double">Viền dưới kiểu kép.</p>
  <p class="dashed">Viền dưới kiểu gạch ngang.</p>
  <p class="solid">Viền dưới kiểu liền.</p>
  <p class="inset">Viền dưới kiểu chìm.</p>
  <p class="outset">Viền dưới kiểu nổi.</p>
</body>
</html>

Mỗi đoạn văn bản hiển thị một kiểu viền dưới khác nhau, giúp bạn so sánh trực quan các tùy chọn.