Rounded corners in outlook without images

I can create rounded corners in many clients with

style="-moz-border-radius: 15px; border-radius: 15px;"

However this CSS does not create rounded corners in Outlook. Is there any easy way to create rounded corners without images in Outlook?

Solution 1:

This code produces buttons with rounded corners in Outlook 2010 using the Outlook conditional comments () and VML:

    <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]-->
</div>

Tested in Outlook 2010 and major browsers only, not OWA, Outlook.com or any mobile browsers. It's worth a closer look. Credit where due -- http://www.industrydive.com/blog/how-to-make-html-email-buttons-that-rock/

Solution 2:

http://www.campaignmonitor.com/css/ displays all css supported in major email clients. Rounded borders didn't even make it to the list. On the page there is a link to a full PDF, which notes that border radius is ONLY supported in Thunderbird 2

please note that you have to embed the styles in the html elements to support a broad range of email clients

You can find the full list of supported HTML elements and CSS styles in the following series of articles:

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)

Solution 3:

Further to @VanAlberts answer which shows Eli Dickinson's great work. Here is a link to Eli's git repo https://gist.github.com/elidickinson/9424116

I thought I would share my improvement to Eli's code which allows for dynamic width button based on the text inside.

I found this https://litmus.com/community/discussions/538-vml-outlook-07-10-13-unwanted-20px-padding-at-the-bottom which shows how to use mso-fit-shape-to-text:true

And this https://litmus.com/community/discussions/1269-flexible-multi-line-bulletproof-buttons which shows how to avoid some unwanted padding.

This is my end result

<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="mso-wrap-style:none; mso-position-horizontal: center" arcsize="10%" strokecolor="#0368d4" strokeweight="1px" fillcolor="#d62828">
    <v:textbox style="mso-fit-shape-to-text:true">
        <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">Button Text Here!</center>
    </v:textbox>
  </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="font-size:16px; font-weight: bold; font-family:sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
    <span style="color: #ffffff;">
      Button Text Here!
    </span>
    </a>
  </td> 
  </tr> </table> 
  <![endif]>
</div>

Seems to work great in outlook 2016 which uses word to render HTML