HTML Table Borders

HTML tables can have borders of different styles and shapes. In this guide, you will learn how to create and style table borders in HTML and CSS.

Student Information

This is an example table displaying student information. The borders will be styled in various ways in the examples below:

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Class</th>
            <th>Subject</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Reeha</td>
            <td>8th</td>
            <td>Computer</td>
        </tr>
        <tr>
            <td>Moazma</td>
            <td>8th</td>
            <td>Computer</td>
        </tr>
        <tr>
            <td>Alvina</td>
            <td>8th</td>
            <td>Computer</td>
        </tr>
    </tbody>
</table>

How To Add a Border

To add a border, use the CSS border property on table, th, and td elements:

table, th, td {
  border: 1px solid black;
}

Collapsed Table Borders

To avoid having double borders, set the CSS border-collapse property to collapse:

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

Style Table Borders

If you set a background color of each cell, and give the border a white color (same as the document background), you get the impression of an invisible border:

table, th, td {
  border: 1px solid white;
  border-collapse: collapse;
}
th, td {
  background-color: #96D4D4;
}

Round Table Borders

With the border-radius property, the borders get rounded corners:

table, th, td {
  border: 1px solid black;
  border-radius: 10px;
}

Dotted Table Borders

With the border-style property, you can set the appearance of the border to dotted:

th, td {
  border-style: dotted;
}

Border Color

With the border-color property, you can set the color of the border:

th, td {
  border-color: #96D4D4;
}