Rounders Ecken funktioniert nicht in CSS

Question

Ich habe eine E-Mail-Vorlage Design, das ich mache. Im unteren Bereich der Seite: [Meine Beispielseite] [1] befinden sich 2 Schaltflächen. Der Knopf hat einen grünen Rand und einen roten Rand. Ich möchte eine 3px-Grenze an der grünen Grenze setzen, aber ich kann es nicht funktionieren lassen. Ich kann es nur für die Grenze innerhalb der grünen Grenze schaffen.

Kann jemand sehen, warum das passiert?

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

Sie können die Tabellenzelle inline-block ändern, sondern dass unbeabsichtigte Folgen haben kann.

table.button.secondary table td { display: inline-block; }

Ich würde nur die a machen, die den roten Rand derzeit ein Blockelement hat, so dass sie die gesamte Tabellenzelle in Anspruch nehmen, dann wird die Grenze gleich aussehen, als ob es auf die Tabelle Zelle angelegt wurde stattdessen. Das ist auch ein besseres UX, da das ein anklickbarer Link ist und der Rahmen den Link umschließt - Sie sollten in der Lage sein, irgendwo innerhalb des Rahmens zu klicken, um den Link zu aktivieren.

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; 
}