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 using the <table> tag in conjunction with the <tr>, <td> and <th> tags.

Learn about how to create an HTML table here.

Creating a Border for HTML Table

After creating an HTML table you should add a border to it, as borders not added by default. Let’s see an example of a table without borders to see the difference:

Example of an HTML table without borders:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </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>

The <table> element has a border attribute which is not used in HTML5. So 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 also the border-collapse property (if you don’t define the border-collapse, it will use border-collapse: separate by default).

Example of creating a border for 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 HTML Table Border Style Using CSS

You can give styling to your table using the CSS shorthand border property or border-width, border-style, border-color CSS properties separately. See the example to have the visible result of these properties:

Example of changing 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 want 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. Let’s see an example with bottom border:

Example of an HTML table with bottom borders:

<!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>
    <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 you should remove the border-collapse property for this to work properly. Let’s see an example where all the table elements are rounded:

Example of creating rounded borders for 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>
    <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 <p>, <h2> or <div> Elements

In the same way you can add a border to other HTML elements. Let's see an example of how to add border to <p>, <h2> and <div> elements.

Example of adding borders to <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>

In the case you want to have a rounded border on paragraphs, follow this example to learn how to do it. Find also how much to set the value of 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>

Do you find this helpful?

Related articles