To incorporate a border, apply the CSS border property to the table, th, and td elements.
Example
| table, th, td { border: 1px solid black; } |
To prevent the occurrence of double borders as shown in the example above, establish the CSS border-collapse property as collapse.
This action will cause the borders to merge into a single border.
Example
| table, th, td { border: 1px solid black; border-collapse: collapse; } |
When you assign a background color to each cell and set the border color to white (matching the document background), it creates the illusion of an invisible border.
Example
| table, th, td { border: 1px solid white; border-collapse: collapse; } th, td { background-color: #96D4D4; } |
Using the border-radius property results in rounded corners for the borders.
Example
| table, th, td { border: 1px solid black; border-radius: 10px; } |
Exclude the table from the CSS selector to omit the border around it.
Example
| th, td { border: 1px solid black; border-radius: 10px; } |
The border-style property allows you to define the visual style of the border.
The subsequent values are permissible:
dotted dashed solid double groove ridge inset outset none hiddenExample
| th, td { border-style: dotted; } |
Using the border-color property enables you to specify the color of the border.
Example
| th, td { border-color: #96D4D4; } |