Re: Outlook masks bottom border of call to action button. How to fix?

Christine_LeBla

I am using one of the built in templates in Marketo for email design.

When I test, Outlook hides the bottom border of the button design.
How can I make it bulletproof for Outlook?

 <td style="border-collapse: collapse; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;" align="left" bgcolor="${photoRButtonBackgroundColor}"><a class="primary-font button" href="${photoRLink}" target="_blank" style="border-left-style: solid;font-size: 14px;text-decoration: none;padding-top: 0.8em;padding-bottom: 0.8em;padding-left: 1.3em;padding-right: 1.3em;border-top-width:${photoRBorderSize};border-right-width:${photoRBorderSize};border-bottom-width:${photoRBorderSize};border-left-width:${photoRBorderSize};border-top-style: solid;border-right-style: solid;border-bottom-style: 
solid;color: #002f87;border-top-color:${photoRBorderColor};border-right-color:${photoRBorderColor};border-bottom-color:${photoRBorderColor};border-left-color:${photoRBorderColor};display: inline-block;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;-moz-background-clip: padding;-webkit-background-clip: padding-box;background-clip: padding-box;font-weight: 
700;font-family:'Varela Round', Arial, sans-serif;background-color:${photoRButtonBackgroundColor};"> 
                                                              <!--[if gte mso 9]>&nbsp;&nbsp;<![endif]-->${photoRLinkText} 
                                                              <!--[if gte mso 9]>&nbsp;&nbsp;<![endif]--></a></td> 
                                                        </tr>

Disha_Goyal6

Hi @Christine_LeBla, please use the below code

<tr>
<td style=" -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;" align="left" bgcolor="#ff0000"><a class="primary-font button" href="${photoRLink}" target="_blank" style="font-size: 14px;text-decoration: none;padding-top: 0.8em;padding-bottom: 0.8em;padding-left: 1.3em;padding-right: 1.3em;border:${photoRBorderSize} solid ${photoRBorderColor};color: #002f87;display: inline-block;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;-moz-background-clip: padding;-webkit-background-clip: padding-box;background-clip: padding-box;font-weight: 
700;font-family:'Varela Round', Arial, sans-serif;background-color:${photoRButtonBackgroundColor};"> 
<!--[if gte mso 9]>&nbsp;&nbsp;<![endif]-->${photoRLinkText} 
<!--[if gte mso 9]>&nbsp;&nbsp;<![endif]--></a></td> 
</tr>

Let me know if this helps!

Thanks,

Disha

Christine_LeBla

Hi,

I swapped in and tested. Unfortunately, the bottom border of the button still does not display in Outlook. Ugh!

Any idea why this is?