Styling HTML Table Borders with CSS: A Complete Guide

Master the art of customizing HTML table borders using CSS. This tutorial covers adding basic borders, collapsing borders, styling border appearance, creating rounded borders, using different border styles (dotted, dashed, etc.), and setting border colors. Includes code examples!

Styling HTML Table Borders with CSS

This chapter demonstrates how to customize the appearance of HTML table borders using CSS, controlling their style, color, and shape.

Adding Basic Borders

To add borders to an HTML table, apply the CSS border property to the <table>, <th> (table header), and <td> (table data) elements. This creates a border around each table cell.

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

Collapsing Borders

By default, you might see double borders where cells meet. To avoid this, use the border-collapse: collapse; property. This merges adjacent cell borders into a single border.

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

Styling Border Appearance

You can create visually interesting effects by combining border styles with background colors. For example, a white border on a colored cell can create the illusion of a borderless table.

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

Rounded Borders

The border-radius property adds rounded corners to table borders.

table, th, td {
  border: 1px solid black;
  border-radius: 10px; /* Adjust value for roundness */
}

Dotted and Other Border Styles

The border-style property controls the border's appearance (dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden).

th, td {
  border-style: dotted;
}

Border Color

Use the border-color property to set the border's color.

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