Rounded corners in outlook without images

by

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/

More Related Contents:

  1. How to design an HTML/CSS signature that will work in Outlook 2016? [duplicate]
  2. Can you link to a CSS file from an email?
  3. Responsive order confirmation emails for mobile devices?
  4. Can I put a … tag within the body of a HTML file to send in email?
  5. The css padding is not working in outlook
  6. Can Outlook 2010 use a web font in an html email?
  7. Is there an equivalent of CSS max-width that works in HTML emails?
  8. My inline-block elements are not lining up properly
  9. How can I select the last element with a specific class, not last child inside of parent?
  10. How to make CSS3 rounded corners hide overflow in Chrome/Opera
  11. Why media queries has less priority than no media queries css
  12. Flexbox fill available space vertically
  13. Outline radius?
  14. Easier way to create circle div than using an image?
  15. Customizing Increment Arrows on Input of Type Number Using CSS
  16. Remove outline from select box in FF
  17. masking image with CSS
  18. Absolute position and Overflow:hidden
  19. what does -webkit-transform: translate3d(0,0,0); exactly do? Apply to body?
  20. How to center an iframe horizontally?
  21. How to Make A Chevron Arrow Using CSS?
  22. Change the column order in a css grid
  23. How to center buttons in Twitter Bootstrap 3?
  24. :before && :after pseudo elements not showing Firefox
  25. @font-face not working with specific version of Internet Explorer 11
  26. Font Awesome & Unicode
  27. How to make one span both columns in a two column table?
  28. What is the difference between phrasing content and flow content?
  29. CSS crop string in the middle
  30. What does “semantically correct” mean?

Leave a Comment