Border radius not working on outlook desktop

Question

The border-radius to make the button round don't work in outlook desktop.

here's the code i try in html

<table border="0" cellspacing="0" cellpadding="10" valign="top">
                          <tr>
                            <td class="outlook-btn" align="center" style="font-size:18px; background-color:#FFFFFF;">
                              <font face="Arial, sans-serif">
                                <a  href="#" style="padding: 10px 25px; border-radius:5px; color:#df0024; text-decoration:none;">GET STARTED</a>
                              </font>
                            </td>
                          </tr>
                       </table>

conditional comments for outlook

.outlook-btn{
padding: 10px 25px !important;
border-radius: 20px !important;
border: 1px solid #000000 !important;
}

expected result return result

Answer 1

Since 2007, Outlook on Windows uses Word as a rendering engine. And that engine hasn't really been updated since 2007, so it doesn't support any HTML or CSS that came up since. And so it doesn't support border-radius. (You can check CanIEmail.com for details about CSS support in Outlook and other email clients: https://www.caniemail.com/features/css-border-radius/).

A common solution to get rounded corners in Outlook on Windows is to use VML. It's an image format akin to SVG. Campaign Monitor has a button generator that uses VML for Outlook on Windows: https://buttons.cm/ (But note that VML can have a negative impact on accessibility, for example making links in VML unavailable to keyboard users.)

Answer 2

Unfortunately, for rounded button corners, you'll likely need to use images or VML to get such a thing in outlook. At my company I tend to use images for rounded corners as part of another element whenever possible, and VML if not possible the rounded corners are not part of an image. Unfortunately, VML doesn't seem to work for web outlook either, so the fallback you need to make should involve having the vml in mso conditionals around the content.

Here's the code that I've made to try to make rounded corners work for you in outlook with VML. I've glanced through my litmus previews, so it should work, but you will likely also need to try using litmus previews on your end to make sure it works with all the quirks of your own code. I've tried to make the code match what you have.

<table border="0" cellspacing="0" cellpadding="0" valign="top">
    <tr>
        <td align="left">
        <!--[if mso]>
            <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" stroked="f" arcsize="7.5%" fillcolor="#FFFFFF" style="width:150px; height:40px;">
                <v:textbox inset="0,0,0,0">
        <![endif]-->
        <table border="0" cellspacing="0" cellpadding="10" valign="top">
            <tr>
                <td class="outlook-btn" align="center" valign="middle" style="background-color:#FFFFFF; padding:10px 25px; overflow:hidden; border-radius:5px; font-size:18px; line-height:100%;">
                    <a href="#" style="text-decoration:none;">
                        <font class="txt" face="Arial, sans-serif" style="color:#DF0024;">Get Started</font>
                    </a>
                </td>
            </tr>
        </table>
        <!--[if mso]>
                </v:textbox>
            </v:roundrect>
        <![endif]-->
        </td>
    </tr>
</table>

I usually do not put padding upon anchor tags as they are by default inline tags, and sometimes support for padding on inline tags isn't the most robust.

From my experiences, outlook also tends to overwrite the colors you put on anchor tags, especially for links that have been clicked. Due to this, I usually put an inline element within the anchor tags add a fake class to it to reduce the likelihood of my inline-styles being overwritten, and add the color to the inline element.