Search code examples
cssoutlook-2016

Border-radius property not working in outlook

I have a button in my email, which when viewed through outlook has some problems with border radius. It is not considering the styles which I give for border-radius and padding. But the same is supported in the browser and working as expected. Is there any hack to make these styles working in outlook?

 <td style="border-radius: 2px;" bgcolor="#0c6cd7">
Solution

  • Due to its usage of the MS Word template, Outlook does not support the border-radius property. Therefore, we need to provide code that will work for Outlook as well as other email clients. Please find the below piece of code which will work for Outlook, browser or other email clients.

    <td>
  <div>
    <!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://example.com" style="height:36px;v-text-anchor:middle;width:150px;" arcsize="5%" strokecolor="#EB7035" fillcolor="#EB7035">
        <w:anchorlock/>
        <center style="color:#ffffff;font-family:Helvetica, Arial,sans-serif;font-size:16px;">I am a button &rarr;</center>
      </v:roundrect>
    <![endif]-->
    <a href="http://example.com" style="background-color:#EB7035;border:1px solid #EB7035;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;">I am a button &rarr;</a>
  </div>
</td>