HTML Table Borders

A brand-new HTML table has no visible borders at all -- rows and columns exist structurally but render as invisible lines on the page. Table borders are what actually draw those grid lines so a reader can visually tell where one cell ends and the next begins, and CSS gives you full control over their thickness, color, and whether adjacent cell borders merge into one clean line.

In this page:

Adding a Basic Border
Merging Lines with border-collapse
Coloring and Styling Borders
Bordering Only Specific Sides
Rounded Table Borders

Adding a Basic Border

Applying border: 1px solid black to the table, th, and td elements draws a border around the outer table edge as well as around every individual cell, producing the classic grid appearance most people picture when they think of an HTML table.

Note: Apply the same border rule to table, th, and td together using a comma-separated selector to avoid repeating the declaration three times.

Warning: Setting a border only on the table element leaves the individual cells completely borderless, which looks incomplete.

Example: Adding a Basic Border

markup

<style>
  table, th, td {
    border: 1px solid black;
  }
</style>
<table>
  <tr><th>Name</th></tr>
  <tr><td>Alex</td></tr>
</table>

Merging Lines with border-collapse

Without border-collapse, adjacent cells each draw their own separate border, which visually doubles up into a thicker line where two cells touch. border-collapse: collapse merges these shared edges into one single clean line, which is the look nearly every modern table design uses.

Note: Reach for border-collapse: collapse by default on nearly every table you build, unless you specifically want visible spacing between cells.

Warning: Once border-collapse is set to collapse, the border-spacing property has no effect anymore, since there is no longer any gap between cells to space out.

Example: Merging Lines with border-collapse

markup

<style>
  table {
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid black;
  }
</style>
<table>
  <tr><td>Cell</td></tr>
</table>

Coloring and Styling Borders

Just like any other CSS border, table borders accept a color and a line style beyond the default solid black -- border: 2px dashed #3498db draws a thicker, dashed blue line, letting table borders match a site's overall color scheme instead of always looking gray or black.

Note: Use a lighter border color like #ddd for a subtle, modern look instead of the harsher default black.

Warning: Very thick or brightly colored borders on a data-dense table can visually compete with the data itself, making numbers harder to scan quickly.

Example: Coloring and Styling Borders

markup

<style>
  table, th, td {
    border: 2px dashed #3498db;
  }
</style>
<table>
  <tr><td>Cell</td></tr>
</table>

Bordering Only Specific Sides

CSS lets you set only one side of a cell's border, like border-bottom, instead of all four -- this is how the common "row divider" table style is built, where only a horizontal line separates rows and there are no vertical column lines at all.

Note: Use border-bottom-only styling for a clean, minimal "list-style" table look that reads more like a spreadsheet than a boxed grid.

Warning: Applying border-bottom only to td and not th can leave the header row visually disconnected from the divider pattern below it.

Example: Bordering Only Specific Sides

markup

<style>
  td {
    border-bottom: 1px solid #ddd;
  }
</style>
<table>
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
</table>

Rounded Table Borders

Because border-collapse: collapse merges all cell borders into a single flattened grid, border-radius does not work directly on individual cells in a collapsed table. Achieving rounded outer corners instead requires border-collapse: separate along with border-spacing: 0, or applying border-radius to a wrapping container element around the table.

Note: Wrap the table in a container div with overflow: hidden and border-radius set on the container when you need fully rounded outer corners.

Warning: border-radius applied directly to th or td elements inside a collapsed table frequently has no visible effect on the outer table shape.

Example: Rounded Table Borders

markup

<style>
  .wrapper {
    overflow: hidden;
    border-radius: 8px;
  }
</style>
<div class="wrapper">
  <table>
    <tr><td>Cell</td></tr>
  </table>
</div>

Common Mistakes

Setting border only on the <table> element and expecting individual cells to get borders too, when table, th, and td each need their own border declaration.
Ending up with a doubled, thick-looking grid line between cells because border-collapse was never set to collapse.
Using the deprecated HTML border="1" attribute instead of a CSS border property, which offers far less styling control.

Chapter Summary

Borders must be applied to the table, th, and td elements individually, or all three, to fully outline a table's grid.
border-collapse: collapse merges adjacent cell borders into a single clean line instead of a doubled one.
Border color, width, and style (solid, dashed, dotted) are all fully customizable with standard CSS border properties.

Browser Support

Table border styling with CSS has been supported in every browser since CSS1.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML Tables Next Lesson → HTML Table Sizes

HTML Table Borders

Adding a Basic Border

Merging Lines with border-collapse

Coloring and Styling Borders

Bordering Only Specific Sides

Rounded Table Borders

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code