I am facing an issue where the border-radius is not being displayed on a specific HTML table. I am having difficulty in applying rounded corners to the entire table so that the table edges have a 30px curve. Here is an example of what I am looking for:
I have gone through other solutions provided by answered questions, but none of them seem to work with my HTML. What could I be 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"> - </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"> - </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"> - </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"> - </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>