How to add border radius to angular mat table?

Question

I am trying to make the mat-table border as round. But it is not working. Tried this-

table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 1em;
}

How to achieve this?

Answer 1

The most simple solution that worked for me was to hide the overflow of certain elements that gave the unfinished look when we set the border-radius. So, we just handle that

.mat-table{    
    border-radius: 8px;
    overflow:hidden !important;
}

Feel free to point out cases where this might cause other issues.

Answer 2

the problem is that you need over-ride the background-color of mat-table:

.mat-table
{
  background-color:transparent!important;  
}
table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 5em;
}
table tr:last-child td /*To remove the last border*/
{
  border-bottom:0 solid
}

stackblitz