Back to home

HTML Table Borders

How To Add a Border

Table With Border

Use the CSS border property to add a border to the table.

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
John Doe 80

Collapsed Table Borders

Collapsed Borders

If you want the borders to collapse into one border, add the CSS border-collapse property.

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
John Doe 80

Style Table Borders

Table With Invisible Borders

Style the table with white borders and a background color of the cells to make the impression of invisible borders.

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
John Doe 80

Round Table Borders

Table With Rounded Borders

Use the CSS border-radius property to add rounded corners to the borders.

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
John Doe 80

Table With Rounded Borders

Use the CSS border-radius property to add rounded corners to the table cells.

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
John Doe 80

Dotted Table Borders

th, td { border-style: dotted; }

Table With Dotted Borders

Use the CSS border-style property to set the style of the borders.

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
John Doe 80

Border Color

Table With Border Color

Use the CSS border-color property to set the color of the borders.

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
John Doe 80