CODEWITHSUNDEEP
csshtml-tableoutlookborder
Chandan Rathore
Chandan Rathore

Reputation: 73

Border radius not working in email templates on Windows Outlook

I am facing a border-radius issue in an email template on the Outlook app. I have tried with -WebKit-border-radius and -ms-border-radius as well, but it's still not working in Outlook app.

table {
  width: 32px !important;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -ms-border-radius: 50px;
  -moz-border-radius: 50px;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 12px;
  text-align: center;
}
<table align="center" height="32" width="32" bgcolor="#293248" cellspacing="0 " cellpadding="0 "></table>

Upvotes: 7

Views: 15061

Answers (1)

Mahendra pratap singh ahada
Mahendra pratap singh ahada

Reputation: 274

CSS3 is not supported by Outlook, as border radius is CSS3 property and it won't work in Outlook. But their are alternative solutions to your problem. Use below Code it will work in Outlook as it is tested in Outlook 2010,2013,2016,2019 

    <div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.EXAMPLE.com/" style="height:40px;v-text-anchor:middle;width:300px;" arcsize="10%" stroke="f" fillcolor="#d62828">
    <w:anchorlock/>
    <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
        Button Text Here!
    </center>
</v:roundrect>
<![endif]-->
<!--[if !mso]> <!-->
<table cellspacing="0" cellpadding="0"> <tr>
    <td align="center" width="300" height="40" bgcolor="#d62828" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;">
        <a href="http://www.EXAMPLE.com/" style="color: #ffffff; font-size:16px; font-weight: bold; font-family:sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
            Button Text Here!
        </a>
    </td>
</tr> </table>
<!-- <![endif]-->

Upvotes: 10

Related Questions