HTML table borders are used to create visible lines around table cells, rows, and the outside of a table. Borders help separate information and make data easier to read. You can use table borders to display student marks, employee details, product prices, schedules, and other structured information.

In modern HTML, CSS is the recommended way to add and customize table borders. You can control the border color, thickness, style, and spacing to create tables that match your website design.

In this tutorial, you will learn how to add borders to HTML tables, style individual cells, collapse borders, create rounded borders, and customize borders with practical examples.

What Are HTML Table Borders?

HTML table borders are lines displayed around a table or its cells. You can use CSS properties such as border, border-collapse, and border-spacing to control their appearance.

For example, the following CSS adds a black border around table headers and data cells.

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

The border property defines the thickness, style, and color of the border.

HTML Table Borders Example

Let’s create a simple table with borders around every cell.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Table Borders</title>

  <style>
    table, th, td {
      border: 1px solid black;
    }
  </style>
</head>
<body>

  <h2>Student Details</h2>

  <table>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Course</th>
    </tr>
    <tr>
      <td>Rahul</td>
      <td>21</td>
      <td>HTML</td>
    </tr>
    <tr>
      <td>Priya</td>
      <td>22</td>
      <td>CSS</td>
    </tr>
  </table>

</body>
</html>

In this example, the CSS selector table, th, td applies a one-pixel black border to the entire table, its header cells, and its data cells.

This creates visible lines around the table and separates each cell.

HTML Table Borders Using CSS

The CSS border property is the standard way to add borders to HTML tables.

Its basic syntax is:

selector {
  border: width style color;
}

For example:

th, td {
  border: 2px solid blue;
}

This declaration creates a two-pixel solid blue border around each table header and data cell.

The border property accepts three main values.

Value	Description	Example
Width	Sets the border thickness	2px
Style	Defines the border appearance	solid
Color	Sets the border color	blue

You can combine these values to create different border designs.

HTML Table Borders with Border Collapse

By default, adjacent table cell borders can appear as separate lines. The CSS border-collapse property controls whether neighboring borders are combined.

The border-collapse property accepts two common values.

Value	Description
collapse	Combines adjacent borders into a single border
separate	Keeps cell borders separate

Example:

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }

  th, td {
    border: 1px solid #333;
    padding: 10px;
  }
</style>

The border-collapse: collapse declaration creates a cleaner table by combining the borders between neighboring cells.

This is commonly used in modern website tables.

HTML Table Borders with Border Spacing

The CSS border-spacing property controls the distance between adjacent table cells when borders are separate.

<style>
  table {
    border-collapse: separate;
    border-spacing: 8px;
  }

  th, td {
    border: 1px solid #333;
    padding: 10px;
  }
</style>

The border-spacing: 8px declaration creates an eight-pixel gap between neighboring cells.

Remember that border-spacing has no visible effect when border-collapse: collapse is applied.

HTML Table Borders with Different Colors

You can change the border color to match your website’s design. CSS supports named colors, hexadecimal values, RGB values, and other valid CSS color formats.

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid #0878d1;
    padding: 12px;
  }
</style>

In this example, every cell has a blue border using the hexadecimal color #0878d1.

You can replace this value with another color to create a different appearance.

HTML Table Borders with Different Styles

CSS provides several border styles that change how table borders appear.

Border Style	Description
solid	Creates a continuous line
dashed	Creates a dashed line
dotted	Creates a dotted line
double	Creates two parallel lines
groove	Creates a carved appearance
ridge	Creates a raised appearance
inset	Makes the border appear inset
outset	Makes the border appear raised
none	Removes the border

Example:

<style>
  .solid-table {
    border-collapse: collapse;
  }

  .solid-table th,
  .solid-table td {
    border: 2px solid black;
    padding: 8px;
  }

  .dashed-table th,
  .dashed-table td {
    border: 2px dashed blue;
    padding: 8px;
  }
</style>

You can apply different classes to separate tables to display different border styles.

HTML Table Outer Border

Sometimes you may want a border around the entire table without borders around every cell.

You can achieve this by applying the border property only to the <table> element.

<style>
  table {
    border: 2px solid #0878d1;
    width: 100%;
  }
</style>

This adds a border around the table itself. Individual cells will not automatically receive borders unless you style them separately.

HTML Table Borders with Rounded Corners

You can use the CSS border-radius property to create rounded corners on a table.

<style>
  table {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 10px;
    border-spacing: 0;
    overflow: hidden;
  }

  th, td {
    border: 1px solid #ccc;
    padding: 12px;
  }
</style>

The border-radius property rounds the table’s corners. The overflow: hidden declaration helps keep the cell backgrounds within the rounded outer edges.

For predictable rounded corners, avoid using border-collapse: collapse with this particular approach. The exact appearance can vary with the table structure and browser.

HTML Table Borders with Header Styling

You can style table headers differently from regular data cells by targeting the <th> element.

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
  }

  th {
    background-color: #0878d1;
    color: white;
    border-color: #065fa8;
  }
</style>

This example uses blue borders for the header cells and light gray borders for other cells. The blue background and white text help users distinguish headings from data.

HTML Table Borders on Individual Sides

CSS allows you to apply borders to specific sides of a table cell.

CSS Property	Description
border-top	Adds a border to the top
border-right	Adds a border to the right
border-bottom	Adds a border to the bottom
border-left	Adds a border to the left

Example:

<style>
  td {
    padding: 10px;
    border-bottom: 1px solid #ccc;
  }
</style>

This adds only a bottom border to each data cell. It is useful when you want a simple table design with horizontal separators instead of a full grid.

Common HTML Table Border Mistakes

Avoid these common mistakes when styling table borders:

• Applying borders only to the table while expecting every cell to have a border.
• Forgetting to use border-collapse when you want a continuous grid.
• Using border-spacing together with border-collapse: collapse and expecting gaps between cells.
• Choosing border colors that are difficult to distinguish from the background.
• Using very thick borders that make tables difficult to read.
• Applying rounded corners without considering the table’s border model and cell backgrounds.
• Using outdated HTML presentation attributes instead of CSS.

HTML Table Borders Best Practices

Follow these practices when creating table borders:

• Use CSS border properties to style tables.
• Use border-collapse: collapse when you want a continuous grid.
• Choose border colors with enough contrast against the background.
• Use consistent border thickness throughout the table.
• Add padding to prevent text from touching cell borders.
• Keep mobile tables readable by using responsive containers when necessary.
• Use borders to clarify relationships between data, not to add unnecessary decoration.
• Test the table in different browsers and screen sizes.

HTML Table Borders Exercises

Practice the following exercises to improve your understanding of HTML table borders.

Exercise 1: Create a table with a one-pixel solid black border around every cell.

Exercise 2: Use border-collapse: collapse to combine adjacent cell borders.

Exercise 3: Create a table with blue dashed borders.

Exercise 4: Add only a bottom border to each table cell.

Exercise 5: Create a table with a blue header, gray cell borders, and rounded outer corners.