rounders corners is not working in CSS - html

Question

I have a email template design I am making. In the bottom of the page: [My Example Page][1] there is 2 buttons. THe button have a green border and a red border. I would like to set a 3px border on the green border, but I cannot make it work. I can only make it work for the border inside the green one.
Can anyone see why that happens?
table.button.secondary table td {
background: #e8e8e8;
color: #fefefe;
border-radius: 10px;
border: 1px solid green;
}
table.button.secondary table a {
color: #0d465d;
border: 0px solid #e8e8e8;
border-radius: 10px;
border: 1px solid red;
}
table.button.secondary:hover table td {
background: #e8e8e8;
color: #0d465d;
border: 1px solid #0d465d;
}
table.button.secondary:hover table a {
border: 0px solid #e8e8e8;
}
table.button.secondary:hover table td a {
color: #0d465d;
}
table.button.secondary:active table td a {
color: #0d465d;
}
table.button.secondary table td a:visited {
color: #fefefe;
}
<!-- Email Button Start -->
<table align="center" class="wrapper header float-center background-color__footer__blue">
<tbody>
<tr>
<td class="wrapper-inner">
<center>
<table align="center" class="container" style="background-color:transparent">
<tbody>
<tr>
<td>
<table class="row collapse">
<tbody>
<tr>
<th>
<center>
<table class="button secondary small-expanded">
<tr>
<td>
<table>
<tr>
<td style="text-align:center;" width="230">maim#mail.com
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</th>
<th class="expander"></th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
<!-- Email Button End -->

Answer 1

You can change the table cell to be inline-block, but that may have unintended consequences.
table.button.secondary table td { display: inline-block; }
I would just make the a that has the red border currently a block element so that it takes up the entire table cell, then the border will look the same as if it was applied to the table cell instead. That's a better UX, too, since that's a clickable link and the border wraps the link - you should be able to click anywhere within the border to activate the link.
table.button.secondary table a {
color: #0d465d;
border: 0px solid #e8e8e8;
border-radius: 10px;
border: 1px solid red;
/* add these 2 lines */
display: block;
text-align: center;
}