44

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?

2
  • 13
    short answer: no
    – Ben
    Sep 13, 2011 at 16:51
  • Follow up question: Would it be a bad idea to simply turn the button into an image? Normally this is a bad practice but I wonder if this is an exception?
    – Cameron
    Mar 19, 2019 at 21:49

5 Answers 5

80

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/

8
  • This is a good solution. You need to get creative to not duplicate your content, but it works!
    – Red2678
    Jun 22, 2015 at 17:30
  • 17
    It's a little dirty woraround, but (as I understand) - Microsoft products - are totally workarounds. Thank you.
    – yAnTar
    Apr 3, 2017 at 9:59
  • 7
    @yAnTar: It is funny. Microsoft declare VML as deprecated as IE9, but the new Outlook2017 still use VML to draw rectangles, not SVG as it should be since 2011: msdn.microsoft.com/en-us/library/bb263897(v=vs.85).aspx
    – Adriano
    May 30, 2017 at 9:18
  • Thanks for this answer it lead me to my solution to the same problem. I posted another answer to this question which shows my end solution.
    – Rel
    Jan 10, 2018 at 1:16
  • 1
    Unfortunately, doesn't seem to work on version 1908 of Outlook, the text is clipped vertically and can't be read.
    – jasssonpet
    Apr 15, 2020 at 15:10
17

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)

9
  • 1
    ow you mean its working with gmail wich is rendered by your browser?
    – Ben
    Sep 13, 2011 at 17:09
  • 1
    Ya, it works in gmail which is rendered by my browser, but not in Outlook Web Access which is rendered by my browser too. So the guide still seems wrong to me by saying that it isn't supported in gmail.
    – Danny
    Sep 13, 2011 at 17:16
  • 5
    Yes, the question was about Outlook. I was looking at gmail because when I saw that it wasn't supported on the guide when I knew it partially is (depending on your browser) makes me question whether the guide is a good reference or not.
    – Danny
    Sep 13, 2011 at 17:26
  • 1
    Just found an article on active campaign about newest Outlook 2013, litmus.com/blog/… I don't think Outlook will be supporting radius borders anytime soon. Mar 5, 2013 at 8:45
  • 1
    the funny thing is: 7 years after this post, border-radius and a lot of other basic css still is not supported by outlook. :D plus, we still are happy to use table instead of div Jul 27, 2020 at 12:17
9

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.

2
  • 2
    The least bulletproof button is an image. - Many email clients load the email without images and give the option to download the images. - The alt text of a link is not nearly as obvious of a call-to-action as an actual button. - Using images opens you up to the risk of broken image links, whereas a coded button will always render, even if not always in the exact style one might prefer. - Images increase your email size. On a corporate level, this could slow down send rates of mass distributions. - Images for buttons is generally not considered an ideal practice.
    – MistyDawn
    Oct 13, 2022 at 22:02
  • what if I want rounded corners on a table background? Simple colour?
    – Aquaphor
    Nov 18, 2022 at 0:29
7

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

0
1

I suggest to just not use rounded corners.. after long times of testing, both with Litmus, on multiple clients - rounded corners using the ways suggested such as:

<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>

Will break on GMAIL when forwarding, when forwarding this type of code to GMAIL - it will try to re-create it because it won't contain the condition any longer and will generate the following code as example:

<div style="margin-top:36.0pt">
   <p class="MsoNormal" align="center" dir="RTL" style="text-align:center;direction:rtl;unicode-bidi:embed">
      <span dir="LTR" style="font-size:11.5pt;font-family:&quot;Arial&quot;,sans-serif;color:#2d3b4a">
         <u></u>
         <span>
            <map name="m_3406853463519709989_MicrosoftOfficeMap0">
               <area shape="Polygon" coords="38, 2, 13, 12, 3, 37, 13, 62, 38, 72, 228, 72, 253, 62, 263, 37, 253, 12, 228, 2, 38, 2" href="https://local.greeninvoice.co.il/app/account/verify?key=001dEbYWSscdPxI8xt6BcS%2B%2BrA%3D%3D" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=en&amp;q=https://local.greeninvoice.co.il/app/account/verify?key%3D001dEbYWSscdPxI8xt6BcS%252B%252BrA%253D%253D&amp;source=gmail&amp;ust=1520336994067000&amp;usg=AFQjCNE1iYP97qNrlsCccYFgDyRW3iVPRw">
            </map>
            <img border="0" width="264" height="74" src="?ui=2&amp;ik=4e1d22bf20&amp;view=fimg&amp;th=161f5fb79e36447b&amp;attid=0.1&amp;disp=emb&amp;attbid=ANGjdJ_3ejUStIrGp0uslTPSXPSph1LGDDnyTH2gHxWhcMpCHN_CjO4ZYsqbvqZJ9gXCxQ7e3KHV2CAn0f-FWPYH7w7lTM9ym54909Upm-h_G9W--o_I431bc9U3icg&amp;sz=w528-h148&amp;ats=1520250594056&amp;rm=161f5fb79e36447b&amp;zw&amp;atsh=1" usemap="#m_3406853463519709989_MicrosoftOfficeMap0" alt="Rounded Rectangle: הפעלת החשבון " class="CToWUd">
         </span>
         <u></u>
      </span>
      <span lang="HE" style="font-size:11.5pt;font-family:&quot;Arial&quot;,sans-serif;color:#2d3b4a"><u></u><u></u></span>
   </p>
</div>

This as you can see will break the width, height, text, center of stuff and happens because VML is a proprietary Microsoft language and Outlook converts it to a map when forwarding

enter image description here

Not the answer you're looking for? Browse other questions tagged or ask your own question.