Rounded corners in outlook without images

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/

I recommend using https://buttons.cm/ which will generate something like this:

<div>
  <!--[if mso]>
    <v:roundrect 
      xmlns:v="urn:schemas-microsoft-com:vml" 
      xmlns:w="urn:schemas-microsoft-com:office:word" 
      href="http://TEST.com" 
      style="height:40px;v-text-anchor:middle;width:200px;" 
      arcsize="10%" 
      stroke="f" 
      fillcolor="#B7D636">
    <w:anchorlock/>
    <center>
  <![endif]-->
      <a href="http://TEST.com"
         style="background-color:#B7D636;
                border-radius:4px;
                color:#ffffff;
                display:inline-block;
                font-family:sans-serif;
                font-size:13px;
                font-weight:bold;
                line-height:40px;
                text-align:center;
                text-decoration:none;
                width:200px;
                -webkit-text-size-adjust:none;">
              TEXT
            </a>
  <!--[if mso]>
    </center>
  </v:roundrect>
<![endif]-->
</div>

Note that the most bulletproof kind of button is a button that is an image. That way the whole element will be clickable, it will survive email forwarding, and all email clients will support it without bugs.

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)