border radius not working on my specific table html-CodePudding

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 >
   <table >
   <tr>
        <td ><div > <span > <span >EXAMPLE</span></span></div> </td>
        <td ><div ><div ><div >  TITLE </div><span ><span >&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 ><div > <span > <span >EXAMPLE</span></span></div> </td>
        <td ><div ><div ><div >  TITLE </div><span ><span >&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 ><div > <span > <span >EXAMPLE</span></span></div> </td>
        <td ><div ><div ><div >  TITLE </div><span ><span >&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 ><div > <span > <span >EXAMPLE</span></span></div> </td>
        <td ><div ><div ><div >  TITLE </div><span ><span >&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>

CodePudding user response：

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 >
   <table >
   <tr>
        <td ><div > <span > <span >EXAMPLE</span></span></div> </td>
        <td ><div ><div ><div >  TITLE </div><span ><span >&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 ><div > <span > <span >EXAMPLE</span></span></div> </td>
        <td ><div ><div ><div >  TITLE </div><span ><span >&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 ><div > <span > <span >EXAMPLE</span></span></div> </td>
        <td ><div ><div ><div >  TITLE </div><span ><span >&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 ><div > <span > <span >EXAMPLE</span></span></div> </td>
        <td ><div ><div ><div >  TITLE </div><span ><span >&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>