HTML Table Borders

You can assign borders to the HTML tables and cells.

Table borders can have various styles and shapes.

How To Add

To add a border, apply the CSS border property to <table>, <th>, and <td> elements.

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

Collapsed Table Borders

You can easily notice in the above example that the simple border property is creating double borders. To prevent this effect, use the CSS border-collapse property, which merges the borders into a single border, as shown below.

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

Invisible Borders

By setting a background color for each cell and making the border color white (matching the document background), you can create the illusion of an invisible border.

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

Rounded Borders

Using the border-radius property, borders can be given rounded corners.

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

You can omit the border around the table by excluding table from the CSS selector.

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

Border Styles / Types

Using the border-style property, you can define the visual style of the border.

Possible values are:

dotted

td {
    border-style: solid;
}

dashed

td {
    border-style: dashed;
}

solid

td {
    border-style: solid;
}

double

td {
    border-style: double;
}

groove

td {
    border-style: groove;
}

ridge

td {
    border-style: ridge;
}

inset

td {
    border-style: inset;
}

outset

td {
    border-style: outset;
}

none

td {
    border-style: none;
}

hidden

td {
    border-style: hidden;
}

none is usually used to hide the borders from display.

Border Color

th, td {
 border-color: #ff492c;
}

 Please check below options for the links to our previous or next tutorial.