Runnable HTML Docs: Table Border

Q: How do I add a border to a table in HTML?

Use CSS on the table and its cells: table { border-collapse: collapse; } th, td { border: 1px solid #999; }. The border on the cells draws the grid, and border-collapse: collapse merges neighbouring borders into single lines.

Q: How do I round the corners of a table?

border-radius has no effect on a table with border-collapse: collapse. Use border-collapse: separate with border-spacing: 0, put the radius on the table, and give the corner cells a matching radius (border-start-start-radius and friends) so their backgrounds do not poke out of the corners.

How to add a border to a table

Tables have no borders by default. Add them with CSS: a border on every cell draws the grid, and border-collapse: collapse on the table merges each pair of neighbouring borders into one line.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Table border</title>
  <style>
    table { border-collapse: collapse; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
  </style>
</head>
<body>
  <table>
    <tr><th>Size</th><th>Price</th></tr>
    <tr><td>Small</td><td>3.00</td></tr>
    <tr><td>Large</td><td>4.50</td></tr>
  </table>
</body>
</html>

The border shorthand takes a width, a style and a color, in any order: 1px solid #6b7280. Put it on th, td, not only on table: a border on the table draws only the outside frame.

border-collapse: separate vs collapse

border-collapse decides whether cells share borders.

Value	Result
`separate` (default)	Every cell has its own border, with a gap between cells set by `border-spacing`
`collapse`	Neighbouring cells share one border; `border-spacing` is ignored

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>border-collapse</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
    table { border: 2px solid #2563eb; }
    th, td { border: 2px solid #f59e0b; padding: 6px 10px; }
    .separate { border-collapse: separate; border-spacing: 6px; }
    .collapse { border-collapse: collapse; }
  </style>
</head>
<body>
  <table class="separate">
    <caption>separate</caption>
    <tr><td>A</td><td>B</td></tr>
    <tr><td>C</td><td>D</td></tr>
  </table>
  <table class="collapse">
    <caption>collapse</caption>
    <tr><td>A</td><td>B</td></tr>
    <tr><td>C</td><td>D</td></tr>
  </table>
</body>
</html>

In the separate table you can see both layers: the blue table frame and a separate amber box around each cell, with border-spacing between them. Change 6px to 0 and the cells touch but the lines are still doubled. Only collapse merges them.

When two collapsed borders meet and differ, the wider one wins. At the same width, the style decides (double beats solid, which beats dashed and dotted), and at a tie the cell's border beats the row's, which beats the table's. That is why the outside edge of the collapsed table is amber, not blue: the cells and the table both have 2px solid borders there, and the cells win.

Only horizontal lines, or only inner lines

Most modern tables do not draw every line. Two common patterns:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border patterns</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 32px; font-family: system-ui, sans-serif; }
    table { border-collapse: collapse; }
    th, td { padding: 6px 12px; text-align: start; }

    /* 1. Row lines only */
    .rows th, .rows td { border-bottom: 1px solid #d1d5db; }
    .rows thead th { border-bottom: 2px solid #111827; }

    /* 2. Inner grid, no outer frame */
    .inner th, .inner td { border: 1px solid #d1d5db; }
    .inner tr:first-child th, .inner tr:first-child td { border-top: 0; }
    .inner tr:last-child th, .inner tr:last-child td { border-bottom: 0; }
    .inner th:first-child, .inner td:first-child { border-inline-start: 0; }
    .inner th:last-child, .inner td:last-child { border-inline-end: 0; }
  </style>
</head>
<body>
  <table class="rows">
    <thead><tr><th>Name</th><th>Score</th></tr></thead>
    <tbody>
      <tr><td>Ana</td><td>92</td></tr>
      <tr><td>Bob</td><td>87</td></tr>
    </tbody>
  </table>

  <table class="inner">
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>7</td><td>8</td><td>9</td></tr>
  </table>
</body>
</html>

The second table removes the border on the outer side of each edge cell. border-inline-start and border-inline-end mean the start and end of the row, so the same CSS stays correct in right-to-left languages, where the first cell is on the other side.

Rounded table corners

border-radius does nothing on a table with border-collapse: collapse. Rounded tables use the separate model with no spacing, and draw each line once by giving cells only a bottom and an end border:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Rounded table</title>
  <style>
    table {
      border-collapse: separate;
      border-spacing: 0;
      border: 1px solid #9ca3af;
      border-radius: 10px;
      font-family: system-ui, sans-serif;
    }
    th, td {
      padding: 8px 14px;
      border-bottom: 1px solid #9ca3af;
      border-inline-end: 1px solid #9ca3af;
    }
    th { background: #e5e7eb; }
    tr:first-child > :first-child { border-start-start-radius: 9px; }
    tr:first-child > :last-child { border-start-end-radius: 9px; }
    tr > :last-child { border-inline-end: 0; }
    tr:last-child > * { border-bottom: 0; }
  </style>
</head>
<body>
  <table>
    <tr><th>Plan</th><th>Price</th></tr>
    <tr><td>Free</td><td>0</td></tr>
    <tr><td>Pro</td><td>12</td></tr>
  </table>
</body>
</html>

The two corner cells of the header get their own radius so the gray background follows the curve. Without it, their square corners poke out past the rounded border. The radius is 9px, the table's 10px minus its 1px border, so the two curves line up.

Border color and thickness per part

Borders can differ by part of the table. Selectors on thead, tfoot and individual rows set a heavier line under the header or above the totals:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border per part</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { padding: 6px 14px; border: 1px solid #e5e7eb; text-align: start; }
    thead th { border-bottom: 3px solid #2563eb; }
    tfoot td { border-top: 3px double #111827; font-weight: bold; }
  </style>
</head>
<body>
  <table>
    <thead><tr><th>Month</th><th>Sales</th></tr></thead>
    <tbody>
      <tr><td>July</td><td>120</td></tr>
      <tr><td>August</td><td>135</td></tr>
    </tbody>
    <tfoot><tr><td>Total</td><td>255</td></tr></tfoot>
  </table>
</body>
</html>

The 3px lines win over the 1px gray ones where they meet, following the collapse rules above. For the rest of the table structure (thead, tfoot, th), see HTML table.

The border attribute

Old tutorials use attributes on the <table> tag:

<table border="1" cellspacing="0" cellpadding="6">

Browsers still honor border="1": it draws a border on the table and every cell, in the separate model, which gives the doubled look. All three attributes are obsolete in HTML5. The CSS equivalents are border on the cells, border-spacing (or border-collapse: collapse) on the table, and padding on the cells.

Common mistakes

Border only on table. You get a frame with no lines inside. Add the border to th, td.
Forgetting border-collapse: collapse, then seeing doubled lines.
border-radius with border-collapse: collapse. The radius is ignored.
border-spacing with border-collapse: collapse. Spacing only works in the separate model.
Borders on <tr> in the separate model. Rows do not draw borders unless the table is collapsed; style the cells instead.
Using border="1" in new code. It still works, but it cannot set a color and it is obsolete.

Frequently Asked Questions

How do I add a border to a table in HTML?

Use CSS on the table and its cells: table { border-collapse: collapse; } th, td { border: 1px solid #999; }. The border on the cells draws the grid, and border-collapse: collapse merges neighbouring borders into single lines.

Why does my table have double borders?

By default each cell draws its own border with a gap between cells (border-collapse: separate), so neighbouring cells show two lines. Set border-collapse: collapse on the <table> to merge them into one.

Is the table border attribute still valid?

<table border="1"> still draws borders in every browser, but it is obsolete in HTML5 and gives you no control over color or style. Use the CSS border property instead.

How do I round the corners of a table?

border-radius has no effect on a table with border-collapse: collapse. Use border-collapse: separate with border-spacing: 0, put the radius on the table, and give the corner cells a matching radius (border-start-start-radius and friends) so their backgrounds do not poke out of the corners.

How do I remove the border from a table?

Tables have no border unless something adds one. Remove the border attribute from the <table> tag, or set border: none on table, th, td to override a stylesheet that adds them.

Related concepts