How to Make an HTML Table Border

Knowing how to construct an HTML table is necessary for adding a border to one. Tables may be made by combining the table> element with the tr>, td>, and th> tags in HTML.

Making the HTML Table's Border

An HTML table should add a border after creation because borders are not included by default. Let's look at a sample using the HTML border property first.

Using the border element to create an HTML table as an example:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the page </title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Priya</td>
        <td>22</td>
      </tr>
      <tr>
        <td>Rohan</td>
        <td>27</td>
      </tr>
    </table>
  </body>
</html>

Output:

Nevertheless, if you want to add a border to your tables, we advise utilizing the CSS border property. You must specify the style> of your table before you can apply a border to it.

Remember to include borders for the th and td tags to have a complete table. Set the border-collapse property as well (by default, border-collapse: separate will be used if you don't define it).

An Illustration of How to Add Borders to an HTML Table

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the page</title>
    <style>
      table,
      th,
      td {
        padding: 20px;
        border: 2px solid black;
        border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Priya</td>
        <td>22</td>
      </tr>
      <tr>
        <td>Rohan</td>
        <td>27</td>
      </tr>
    </table>
  </body>
</html>

Output:

How to Use CSS to Modify the Border Style of an HTML Table

The CSS border shorthand property and the border-width, border-style, and border-color properties individually may be used to customize your table. See the sample below to see how these qualities manifest themselves.

Example of altering the CSS border style of an HTML table

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the page</title>
    <style>
      table {
        border-style: ridge;
        border-width: 120px;
        border-color: pink;
        background-color: white;
      }
      th {
        border: 5px solid green;
      }
      td {
        border: 20px groove white;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Priya</td>
        <td>22</td>
      </tr>
      <tr>
        <td>Rohan</td>
        <td>28</td>
      </tr>
    </table>
  </body>
</html>

Output:

You can use any of the following properties: border-top, border-right, border-bottom, and border-left if you don't want the border to wrap around the entire table (or if you require distinct borders on each side of the table).

An Illustration of How to Add Bottom Borders to an HTML Table

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the page</title>
    <style>
      table {
        border-collapse: collapse;
      }
      td,
      th {
        padding: 20px;
        border-bottom: 1px solid red;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Priya</td>
        <td>22</td>
      </tr>
      <tr>
        <td>Rohan</td>
        <td>27</td>
      </tr>
    </table>
  </body>
</html>

Output:

How to Make Borders All Round

The CSS border-radius property may be used to create rounded borders as well. Remember to delete the border-collapse attribute for this situation to function correctly. Let's look at an instance where the table's components are rounded.

An illustration of a table with rounded edges in HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the page</title>
    <style>
      table,
      td,
      th {
        padding: 20px;
        border: 1px solid green;
        border-radius: 3px;
        background-color:pink ;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Priya</td>
        <td>22</td>
      </tr>
      <tr>
        <td>Rohan</td>
        <td>22</td>
      </tr>
    </table>
  </body>
</html>

Output:

How to Apply a Border to the "p" Element, "h2" Element, or "div" Element

Other HTML components can also have borders added in the same way. Look at an example of border addition to the p, h2, and div components.

An illustration of how to apply borders to the p>, h2>, and div> elements:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the page</title>
    <style>
      h2,
      div,
      p {
        padding: 20px;
      }
      h2 {
        border: 2px double red;
        background-color: pink;
      }
      div {
        border-left: 3px solid red ;
        background-color: violet;
      }
      p {
        border: 5px groove pink;
      }
    </style>
  </head>
  <body>
    <h2>Example</h2>
    <div> border property.</div>
    <p>paragraph with border.</p>
  </body>
</html>

Output:

Check out the sample below to see how to give your paragraphs a rounded border. For the result you want, use the border-radius attribute.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        padding: 10px;
      }
      p.normal {
        border: 5px solid pink;
      }
      p.round1 {
        border: 5px solid pink;
        border-radius: 5px;
      }
      p.round2 {
        border: 5px solid pink;
        border-radius: 5px;
      }
      p.round3 {
        border: 5px solid pink;
        border-radius: 5px;
      }
    </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>

Output: