How to Add Border to HTML Table
To add a border to an HTML <table>, you first need to know how to create an HTML table. In HTML, you can create tables by using the <table> tag in conjunction with the <tr>, <td> and <th> tags.
Creating a border for the HTML table
After creating an HTML table, you should add a border to it, as borders are not added by default. First, let’s see an example, where we use the HTML border attribute.
Example of creating an HTML table with the border attribute:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<table border="1">
<tr>
<th>Person</th>
<th>Age</th>
</tr>
<tr>
<td>Ann</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>Result
| Person | Age |
|---|---|
| Ann | 19 |
| Susie | 22 |
Anyway, we recommend using the CSS border property for adding a border to your tables. To add a border to your table, you need to define the <style> of your table.
Remember to add borders also for <th> and <td> tags to have a complete table. Set the border-collapse property as well (if you don’t define the border-collapse, it will use border-collapse: separate by default).
Example of creating borders for the HTML table:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table,
th,
td {
padding: 10px;
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>Person</th>
<th>Age</th>
</tr>
<tr>
<td>Ann</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>How to change the HTML table border style with CSS
You can give styling to your table using the CSS border shorthand property, or the border-width, border-style, border-color properties, separately. See the example below to have a visible result of these properties.
Example of changing the HTML table border style with CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-style: ridge;
border-width: 150px;
border-color: #8ebf42;
background-color: #d9d9d9;
}
th {
border: 5px solid #095484;
}
td {
border: 20px groove #1c87c9;
}
</style>
</head>
<body>
<table>
<tr>
<th>Person</th>
<th>Age</th>
</tr>
<tr>
<td>Ann</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>If you don't want the border to go all around the table (or if you need different borders on each side of the table), you can use any of the following properties: border-top, border-right, border-bottom and border-left.
Example of adding bottom borders to the HTML table:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-collapse: collapse;
}
td,
th {
padding: 10px;
border-bottom: 2px solid #8ebf42;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Person</th>
<th>Age</th>
</tr>
<tr>
<td>Ann</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>How to have rounded borders
You can also have rounded borders by using the CSS border-radius property. Remember that in this case, you should remove the border-collapse property to work properly. Let’s see an example where all the table elements are rounded.
Example of adding rounded borders to the HTML table:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table,
td,
th {
padding: 10px;
border: 2px solid #1c87c9;
border-radius: 5px;
background-color: #e5e5e5;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Person</th>
<th>Age</th>
</tr>
<tr>
<td>Ann</td>
<td>19</td>
</tr>
<tr>
<td>Susie</td>
<td>22</td>
</tr>
</table>
</body>
</html>How to add border to the <p>, <h2> or <div> elements
In the same way you can add a border to other HTML elements. Let's see an example of adding borders to the <p>, <h2> and <div> elements.
Example of adding borders to the <p>, <h2> and <div> elements:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2,
div,
p {
padding: 10px;
}
h2 {
border: 3px double #1c87c9;
background-color: #d9d9d9;
}
div {
border-left: 5px solid #1c87c9;
background-color: #cccccc
}
p {
border: 10px groove #8ebf42;
}
</style>
</head>
<body>
<h2>Border Example</h2>
<div> Div example for the border property.</div>
<p>Some paragraph with border.</p>
</body>
</html>If you want to have a rounded border on paragraphs, follow the example below to learn how to do it. Use the border-radius property to have your preferred outcome.
Example of creating rounded borders on paragraphs:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
padding: 10px;
}
p.normal {
border: 2px solid #1c87c9;
}
p.round1 {
border: 2px solid #1c87c9;
border-radius: 5px;
}
p.round2 {
border: 2px solid #1c87c9;
border-radius: 8px;
}
p.round3 {
border: 2px solid #1c87c9;
border-radius: 12px;
}
</style>
</head>
<body>
<h2>Rounded borders</h2>
<p class="normal">Normal border</p>
<p class="round1">Round border</p>
<p class="round2">Rounder border</p>
<p class="round3">Roundest border</p>
</body>
</html>