html email template does not rendering property in Outlook

Question

As I am working on HTML email template and looks great in all browser but issue with rendering in Outlook. it does not rendering properly especially button and border-bottom element. Attached a screenshot of Outlook.

<table cellspacing="0" cellpadding="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;border-spacing: 0px;">
   <tbody>
      <tr style="border-collapse: collapse;">
         <td width="520" align="left" style="padding: 0;margin: 0;">
            <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;border-spacing: 0px;">
               <tbody>
                  <tr style="border-collapse: collapse;">
                     <td align="center" style="padding: 0;margin: 0;padding-bottom: 15px;">
                        <table width="520" height="101" cellspacing="1" cellpadding="1" border="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;border-spacing: 0px;">
                           <tbody>
                              <tr style="border-collapse: collapse;border-bottom: 1px solid #BDBDBD;height: 1px;width: 100%;margin: 0px;">
                                 <td style="padding: 0;margin: 0;color: #233745;font-family: 'Open Sans', sans-serif;font-size: 18px;font-weight: 700;line-height: 38px;"><strong>Booking Reference:</strong></td>
                                 <td style="padding: 0;margin: 0;text-align: right;color: #233745;font-family: 'Open Sans', sans-serif;font-size: 18px;line-height: 38px;">1087882</td>
                              </tr>
                              <tr style="border-collapse: collapse;border-bottom: 1px solid #BDBDBD;height: 1px;width: 100%;margin: 0px;">
                                 <td style="padding: 0;margin: 0;color: #233745;font-family: 'Open Sans', sans-serif;font-size: 18px;font-weight: 700;line-height: 38px;"><strong>Accommodation:</strong></td>
                                 <td style="padding: 0;margin: 0;text-align: right;color: #233745;font-family: 'Open Sans', sans-serif;font-size: 18px;line-height: 38px;"><a href="" target="_blank" style="-webkit-text-size-adjust: none;-ms-text-size-adjust: none;mso-line-height-rule: exactly;font-family: 'Open Sans', sans-serif;font-size: 18px;text-decoration: underline;font-style: normal;color: #233745;line-height: 38px;">Lodge Suites</a> (August 18 - 2 Nights)</td>
                              </tr>
                              <tr style="border-collapse: collapse;border-bottom: 1px solid #BDBDBD;background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%;height: 1px;width: 100%;margin: 0px;">
                                 <td style="padding: 0;margin: 0;color: #233745;font-family: 'Open Sans', sans-serif;font-size: 18px;font-weight: 700;line-height: 38px;"><strong></strong></td>
                                 <td style="padding: 0;margin: 0;text-align: right;color: #233745;font-family: 'Open Sans', sans-serif;font-size: 18px;line-height: 38px;">Guided Fishing Trip (August 19)</td>
                              </tr>
                           </tbody>
                        </table>
                     </td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>
<tr style="border-collapse: collapse;">
   <td style="padding: 0;margin: 0;padding-top: 15px;padding-bottom: 15px;padding-left: 40px;padding-right: 40px;"> <span style="display: block;height: 48px;width: 270px;border-radius: 10px;background-color: #16A5B4;box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.5);text-align: center;"> <a href="https://viewstripo.email/" target="_blank" style="-webkit-text-size-adjust: none;font-family: 'Open Sans', sans-serif;font-size: 16px;text-decoration: none !important; font-style: normal;color: #fff;font-weight: 700;letter-spacing: 1px;line-height: 47px;text-align: center;display: block;text-transform: uppercase;">Pay Remaining Balance</a></span></td>
</tr>

Answer 1

Buttons are fiddly to deal with. Below are two codes for you for links that simulate a button and work across all email clients the same way. You will have to remove the padding on your td and can change the padding of the buttons to control the height and width.

Solid button:

      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
        <tr>
          <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 0px; text-align: center;" valign="top" bgcolor="#3498db" align="center"> <a href="https://www.stackoverflow.com" target="_blank" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 0px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;">Take action now</a> </td>
        </tr>
      </table>

Bordered button:

      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
        <tr>
          <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #ffffff; border-radius: 0px; text-align: center;" valign="top" bgcolor="#ffffff" align="center"> <a href="" target="_blank" style="display: inline-block; color: #3498db; background-color: #ffffff; border: solid 2px #3498db; border-radius: 0px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;">Take action now</a> </td>
        </tr>
      </table> 

I noticed you are using Open Sans as the font for your button. Outlook will not read this and render Times New Roman. Hope you have coded a call back for it.