rounders corners is not working in CSS

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"><a href="example.com" target="_blank">maim@mail.com</a>
                                      </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;
}