Question
Outlook Rendering Question
I have an email template with circular buttons using border-radius, as anyone who codes HTML knows these do not render in Outlook. I have researched and see multiple ideas and none are working for me. Is there a way to do this within the code so that both work?
Here is my sample code:
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="res" width="40" valign="top" style="border:2px solid #ffffff;border-radius:50%;padding:10px 0px;font-family:verdana;font-size:16px;line-height:16px;text-align:center;color:#ffffff;background-color:#e4002b;font-weight:bold;">
1
</td>
<td class="res" height="12" width="10" style="line-height:1px;font-size:1px;"> </td>
<td class="res" width="40" valign="top" style="border:2px solid #ffffff;border-radius:50%;padding:10px 0px;font-family:verdana;font-size:16px;line-height:16px;text-align:center;color:#ffffff;background-color:#e4002b;font-weight:bold;">
2
</td>
<td class="res" height="12" width="10" style="line-height:1px;font-size:1px;"> </td>
<td class="res" width="40" valign="top" style="border:2px solid #ffffff;border-radius:50%;padding:10px 0px;font-family:verdana;font-size:16px;line-height:16px;text-align:center;color:#ffffff;background-color:#e4002b;font-weight:bold;">
3
</td>
<td class="res" height="12" width="10" style="line-height:1px;font-size:1px;"> </td>
<td class="res" width="40" valign="top" style="border:2px solid #ffffff;border-radius:50%;padding:10px 0px;font-family:verdana;font-size:16px;line-height:16px;text-align:center;color:#ffffff;background-color:#e4002b;font-weight:bold;">
4
</td>
<td class="res" height="12" width="10" style="line-height:1px;font-size:1px;"> </td>
<td class="res" width="40" valign="top" style="border:2px solid #ffffff;border-radius:50%;padding:10px 0px;font-family:verdana;font-size:16px;line-height:16px;text-align:center;color:#ffffff;background-color:#e4002b;font-weight:bold;">
5
</td>
<td class="res" height="12" width="10" style="line-height:1px;font-size:1px;"> </td>
<td class="res" width="40" valign="top" style="border:2px solid #ffffff;border-radius:50%;padding:10px 0px;font-family:verdana;font-size:16px;line-height:16px;text-align:center;color:#ffffff;background-color:#e4002b;font-weight:bold;">
6
</td>
<td class="res" height="12" width="10" style="line-height:1px;font-size:1px;"> </td>
<td class="res" width="40" valign="top" style="border:2px solid #ffffff;border-radius:50%;padding:10px 0px;font-family:verdana;font-size:16px;line-height:16px;text-align:center;color:#ffffff;background-color:#e4002b;font-weight:bold;">
7
</td>
<td class="res" height="12" width="10" style="line-height:1px;font-size:1px;"> </td>
<td class="res" width="40" valign="top" style="border:2px solid #ffffff;border-radius:50%;padding:10px 0px;font-family:verdana;font-size:16px;line-height:16px;text-align:center;color:#ffffff;background-color:#e4002b;font-weight:bold;">
8
</td>
<td class="res" height="12" width="10" style="line-height:1px;font-size:1px;"> </td>
<td class="res" width="40" valign="top" style="border:2px solid #ffffff;border-radius:50%;padding:10px 0px;font-family:verdana;font-size:16px;line-height:16px;text-align:center;color:#ffffff;background-color:#e4002b;font-weight:bold;">
9
</td>
<td class="res" height="12" width="10" style="line-height:1px;font-size:1px;"> </td>
<td class="res" width="40" valign="top" style="border:2px solid #ffffff;border-radius:50%;padding:10px 0px;font-family:verdana;font-size:16px;line-height:16px;text-align:center;color:#ffffff;background-color:#e4002b;font-weight:bold;">
10
</td>
</tr>
</table>