How to Make an HMTL Table With Rounded Corners

Have you ever wondered how to give your HTML tables a sleek, modern look with rounded borders? Adding rounded corners to your tables can transform a plain data presentation into something visually appealing and professional. 

In this blog post, we'll walk you through the process of creating an HTML table with rounded borders, providing clear, step-by-step instructions and practical examples. By the end of this guide, you'll have the skills to enhance your website with stylish, curvy tables that stand out.

How Borders Affect Rounded Corners

Ironically enough, the choice of whether or not to have borders (and to what elements the borders will apply to) will have an effect on your table border. Let me explain:

First we must differentiate between borders around table cells and the entire table. In today’s world, it’s not as common to see rounded borders around individual cells, but it’s an option nonetheless. 

In the more common scenario, you’re looking to have a rounded border applied to the <table> element itself.

As mentioned, this can be a tricky one. Here’s how we can make it happen:

In our guide to HTML table borders, we talk about the specifics required to add a rounded border to your table, which is dependent on whether or not you want to have a border for individual table cells.

Method A: You Don’t Want A Border For Individual Table Cells

By far, the simplest and most direct approach to applying a border radius to a table with borders for individual cells is to add the border-radius property directly to the table element. Additionally, include the border property with specified values for its size, style, and color.

Why does this method work? It avoids complications related to other border settings, making it a straightforward solution. This leads us to the second method.

Method B: You DO Want a Border For Individual Table Cells

This is where things get a bit tricky. Unlike method A, we can’t just set border-radius to the <table> element. This is due to a number of reasons, but the main one is because the borders for individual cells will conflict with the border of the entire table, giving you a look you didn’t want.

But, there is a way! Here’s how we can properly make rounded corners:

1. Add border-collapse: separate; and border-spacing: 0; Collapse won't work!

For the first step, we need to set border-collapse: separate; and border-spacing: 0; to the <table> element. Collapse won't work here. Since we are using the cell borders, we need to ensure that they collapse together and have no space in between (unless of course you desire this effect for your table). We'll also add some padding to each cell here in order to make the example a bit more clear.

CSS

table {
  border-collapse: separate;
  border-spacing: 0;
}

td, th {
  padding: 0.5rem;
}

2. Add a bottom and right border to each cell

This will set the foundation for the rest of the borders in the table.

CSS

/* Apply bottom and right borders to table cells */
th, td {
  border-bottom: 1px solid black; /* Bottom border */
  border-right: 1px solid black; /* Right border */
  padding: 0.5rem; /* Optional: Add padding for content */
}

3. Add a left border to the first cell in each row

In order to achieve a left border effect, we need to add a border to the first cell in each row.

CSS

table tr td:first-child, 
table tr th:first-child {
  border-left: 1px solid black;
}

4. Add a top border to each <th>

Similar to the above, in order to achieve a top border effect, we need to add a border to the top of each <th> element (or <td> if you aren't using header cells).

CSS

table tr th {
  border-top: 1px solid black;
}

5. Add border-top-left-radius to the first cell in the first row

Next, we need to add the border-top-left-radius CSS property to the first cell in the first row.

CSS

table tr:first-child th:first-child {
  border-top-left-radius: 0.5rem;
}

6. Add border-top-right-radius to the last cell in the first row

Similarly, we need to add the border-top-right-radius property to the last cell in that same row.

CSS

table tr:first-child th:last-child {
  border-top-right-radius: 0.5rem;
}

7. Add border-bottom-left-radius to the first cell in the last row

Heading to the bottom, we now need to add the border-bottom-left radius property to the first cell in the last row of the table.

CSS

table tr:last-child td:first-child {
  border-bottom-left-radius: 0.5rem;
}

8. Add border-bottom-right-radius to the last cell in the last row

For the last border radius, we need to add the border-bottom-right-radius to the last cell in that same row. Now, each of the corner cells should have the proper border radius applied!

CSS

table tr:last-child td:last-child {
  border-bottom-right-radius: 0.5rem;
}

With this, we now have a table with a smooth, seamless border radius applied. A great example of this in action can be found on this Astrology / Numerology website. Feel free to open up Google DevTools to take a closer look.

Final Thoughts

In conclusion, mastering the art of creating HTML tables with rounded corners can undoubtedly elevate your web design game. As we've explored various techniques and pitfalls in this post, it's clear that achieving that perfect look isn't always a walk in the park. Personally, I've faced my fair share of challenges when trying to get the styling just right. From battling conflicting CSS properties to dealing with unexpected rendering issues across different browsers, it's been a learning curve.

But despite the occasional frustrations, there's a sense of satisfaction that comes with overcoming these obstacles. Each troubleshooting session is a chance to refine your skills and deepen your understanding of web development. So, the next time you find yourself wrestling with table borders and corner radii, remember that you're not alone in the struggle. Keep experimenting, keep learning, and eventually, you'll crack the code to crafting beautifully styled HTML tables that command attention on any webpage. Happy coding!