How to create a table with rounded corners using CSS

Hello readers, today in this article we will discuss how to create a table with rounded corners using CSS.

It won't be as easy as you think. If you're thinking that you just need to add the border-radius property to the table, you're right but it won't work.

Demo - HTML table with rounded corners. #

Before we dive into the details, let's look at our final project demo.

table {
  border-collapse: separate;
  border-spacing: 0;
}
th,td {
  padding: 8px 15px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
}
th:first-child, td:first-child {
  border-left: 2px solid #000;
}
th {
  background-color: #ddd;
  border-top: 2px solid #000;
}
th:first-child {
  border-top-left-radius: 8px;
}
th:last-child {
  border-top-right-radius: 8px;
}
tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}
tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}

1. We have set the border-collapse property to the table with the value separate. If we set its value to collapse, the border-radius property does not work.

   We have also used the border-spacing property and set its value to 0. It specifies the distance between the borders of adjacent cells.

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

2. After selecting the th and td elements, we have added some padding to the cell and border to the right and bottom.

   th,td {
     padding: 8px 15px;
     border-right: 2px solid #000;
     border-bottom: 2px solid #000;
   }

3. Now select the first child of the th, td element using the first-child pseudo-class and set a border of 2px to the left.

   th:first-child, td:first-child {
     border-left: 2px solid #000;
   }

   Now the output is :

   One	Two	Three
   Four	Five	Six
   Seven	Eight	Nine

4. Now we have to select the th element and set a border to the top.

   th{
     border-top: 2px solid #000;
   }

5. Finally, using the border-radius property, add radius to the table.

   th:first-child {
     border-top-left-radius: 8px;
   }
   th:last-child {
     border-top-right-radius: 8px;
   }
   tr:last-child td:first-child {
     border-bottom-left-radius: 8px;
   }
   tr:last-child td:last-child {
     border-bottom-right-radius: 8px;
   }

Example of a rounded table. #

Click on the Try it Yourself » button to open the code in our online code editor.