border radius not working on my specific table html

Question

I have got a problem where the Border-radius is not showing on my specific html table, I have problems with adding rounded corners to the whole table so the edges of the table are rounded in 30px. just like in the following example:

I have tried other answered questions but those answers do not work on my html,what am i doing wrong?

tbody tr:nth-child(even) {
  background-color: #191919;
 
}
tbody th {
  text-align: left;
}
tbody tr:nth-child(odd) {
  background-color: #2B2B2B;
  color:white;

}
caption {
  font-weight: bold;
  font-size: 24px;
  text-align: left;
  color: #333;
  margin-bottom: 16px;
}
  table {
      border-collapse: collapse;
      text-align: left;
      vertical-align: middle;
      border-radius:30px;
  }
  th, td {
    padding: 8px;
    
  }
  thead th {
    width: 25%;
    
  }
  .headtable{
    flex: 1 1 auto;
    overflow: hidden;
  }
  .shouldertable{
    display: flex;
    align-items: baseline;
    overflow: hidden;
}
.kneetable{
    flex-shrink: 1;
    display: inline-flex;
    overflow: hidden;
    font-family: 'latobold', Arial, sans-serif;
}
.toestable{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-basis: 0;
    box-flex: 1;
    flex-grow: 1;
    flex-shrink: 1;
    text-align: left;
    color: #5f6368;
    empty-cells: show;
}
.nosetable{
    white-space: nowrap;

float: left;
    text-align: left;
  }
  .nosetablesendero{
    white-space: nowrap;
    color: #d9d9d9;
float: left;
    text-align: left;
    margin-top: 10px;
margin-bottom: 10px;
font-size: 20px;
padding-left: 22px;
font-family: 'latolight', Arial, sans-serif;
  }
.sender{
    max-width: 100px;
    padding-right: 32px;
    width: 21%;
 
        max-width: 106px;
        padding-right: 32px;
        width: 29%;
 
}

.tablenotifications{
    width: 100%;

}
.notifications{

  
}
.sentcolo{
    max-width: 0;
    min-width: 0;
}


.border {
    padding: 10px;
    border-color: red;
    border: 1px solid green;
    border-radius: 20px;
    background-color: silver;
  }

<div class="notifications">
   <table class="tablenotifications">
   <tr>
        <td class="headtable sender"><div class="shouldertable"> <span class="kneetablesender"> <span class="nosetablesendero">EXAMPLE</span></span></div> </td>
        <td class="sentcolo"><div class="headtable message"><div class="shouldertable"><div class="kneetable">  TITLE </div><span class="toestable"><span class="nosetable">&nbsp; - &nbsp;</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut  </span></div></div></td>
            
    </tr> 
    <tr>
        <td class="headtable sender"><div class="shouldertable"> <span class="kneetablesender"> <span class="nosetablesendero">EXAMPLE</span></span></div> </td>
        <td class="sentcolo"><div class="headtable message"><div class="shouldertable"><div class="kneetable">  TITLE </div><span class="toestable"><span class="nosetable">&nbsp; - &nbsp;</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut  </span></div></div></td>
            
    </tr> 
    <tr>
        <td class="headtable sender"><div class="shouldertable"> <span class="kneetablesender"> <span class="nosetablesendero">EXAMPLE</span></span></div> </td>
        <td class="sentcolo"><div class="headtable message"><div class="shouldertable"><div class="kneetable">  TITLE </div><span class="toestable"><span class="nosetable">&nbsp; - &nbsp;</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut  </span></div></div></td>
            
    </tr> 
    <tr>
        <td class="headtable sender"><div class="shouldertable"> <span class="kneetablesender"> <span class="nosetablesendero">EXAMPLE</span></span></div> </td>
        <td class="sentcolo"><div class="headtable message"><div class="shouldertable"><div class="kneetable">  TITLE </div><span class="toestable"><span class="nosetable">&nbsp; - &nbsp;</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut  </span></div></div></td>
            
    </tr> 

    </table>
    </div>

Answer 1

Add overflow hidden to the table.

tbody tr:nth-child(even) {
  background-color: #191919;
 
}
tbody th {
  text-align: left;
}
tbody tr:nth-child(odd) {
  background-color: #2B2B2B;
  color:white;

}
caption {
  font-weight: bold;
  font-size: 24px;
  text-align: left;
  color: #333;
  margin-bottom: 16px;
}
  table {
      border-collapse: collapse;
      text-align: left;
      vertical-align: middle;
      border-radius:30px;
  }
  th, td {
    padding: 8px;
    
  }
  thead th {
    width: 25%;
    
  }
  .headtable{
    flex: 1 1 auto;
    overflow: hidden;
  }
  .shouldertable{
    display: flex;
    align-items: baseline;
    overflow: hidden;
}
.kneetable{
    flex-shrink: 1;
    display: inline-flex;
    overflow: hidden;
    font-family: 'latobold', Arial, sans-serif;
}
.toestable{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-basis: 0;
    box-flex: 1;
    flex-grow: 1;
    flex-shrink: 1;
    text-align: left;
    color: #5f6368;
    empty-cells: show;
}
.nosetable{
    white-space: nowrap;

float: left;
    text-align: left;
  }
  .nosetablesendero{
    white-space: nowrap;
    color: #d9d9d9;
float: left;
    text-align: left;
    margin-top: 10px;
margin-bottom: 10px;
font-size: 20px;
padding-left: 22px;
font-family: 'latolight', Arial, sans-serif;
  }
.sender{
    max-width: 100px;
    padding-right: 32px;
    width: 21%;
 
        max-width: 106px;
        padding-right: 32px;
        width: 29%;
 
}

.tablenotifications{
    width: 100%;

}
.notifications{
border-radius: 20px;
overflow: hidden;
  
}
.sentcolo{
    max-width: 0;
    min-width: 0;
}


.border {
    padding: 10px;
    border-color: red;
    border: 1px solid green;
    border-radius: 20px;
    background-color: silver;
  }

<div class="notifications">
   <table class="tablenotifications">
   <tr>
        <td class="headtable sender"><div class="shouldertable"> <span class="kneetablesender"> <span class="nosetablesendero">EXAMPLE</span></span></div> </td>
        <td class="sentcolo"><div class="headtable message"><div class="shouldertable"><div class="kneetable">  TITLE </div><span class="toestable"><span class="nosetable">&nbsp; - &nbsp;</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut  </span></div></div></td>
            
    </tr> 
    <tr>
        <td class="headtable sender"><div class="shouldertable"> <span class="kneetablesender"> <span class="nosetablesendero">EXAMPLE</span></span></div> </td>
        <td class="sentcolo"><div class="headtable message"><div class="shouldertable"><div class="kneetable">  TITLE </div><span class="toestable"><span class="nosetable">&nbsp; - &nbsp;</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut  </span></div></div></td>
            
    </tr> 
    <tr>
        <td class="headtable sender"><div class="shouldertable"> <span class="kneetablesender"> <span class="nosetablesendero">EXAMPLE</span></span></div> </td>
        <td class="sentcolo"><div class="headtable message"><div class="shouldertable"><div class="kneetable">  TITLE </div><span class="toestable"><span class="nosetable">&nbsp; - &nbsp;</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut  </span></div></div></td>
            
    </tr> 
    <tr>
        <td class="headtable sender"><div class="shouldertable"> <span class="kneetablesender"> <span class="nosetablesendero">EXAMPLE</span></span></div> </td>
        <td class="sentcolo"><div class="headtable message"><div class="shouldertable"><div class="kneetable">  TITLE </div><span class="toestable"><span class="nosetable">&nbsp; - &nbsp;</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut  </span></div></div></td>
            
    </tr> 

    </table>
    </div>