Cách hiển thị độ dày viền (border) của phần tử trong HTML?

Thuộc tính border trên <table> từng dùng để đặt độ dày viền. Đã deprecated trong HTML5, thay bằng CSS.

Ví dụ cũ (không khuyến khích)

<!DOCTYPE html>
<html>
  <body>
    <h2>Cầu thủ</h2>
    <table style="width:100%" border="1">
      <th>Tên</th>
      <tr><td>Sachin Tendulkar</td></tr>
      <tr><td>Virat Kohli</td></tr>
    </table>
  </body>
</html>

Cách hiện đại với CSS

<!DOCTYPE html>
<html>
  <head>
    <style>
      table, th, td { border: 1px solid black; border-collapse: collapse; }
    </style>
  </head>
  <body>
    <h2>Cầu thủ</h2>
    <table style="width:100%">
      <caption>Cầu thủ Ấn Độ</caption>
      <th>Tên</th>
      <tr><td>Sachin Tendulkar</td></tr>
      <tr><td>Virat Kohli</td></tr>
    </table>
  </body>
</html>

CSS Border nâng cao

• border-width: thin, medium, thick, hoặc px
• border-style: solid, dashed, dotted, double, groove, ridge, inset, outset, none, hidden
• border-color: màu viền
• Gộp: border: 2px dashed red;
• border-radius: bo góc