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?
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?
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/
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)
table
instead of div
Jul 27, 2020 at 12:17
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.
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
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:"Arial",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&q=https://local.greeninvoice.co.il/app/account/verify?key%3D001dEbYWSscdPxI8xt6BcS%252B%252BrA%253D%253D&source=gmail&ust=1520336994067000&usg=AFQjCNE1iYP97qNrlsCccYFgDyRW3iVPRw">
</map>
<img border="0" width="264" height="74" src="?ui=2&ik=4e1d22bf20&view=fimg&th=161f5fb79e36447b&attid=0.1&disp=emb&attbid=ANGjdJ_3ejUStIrGp0uslTPSXPSph1LGDDnyTH2gHxWhcMpCHN_CjO4ZYsqbvqZJ9gXCxQ7e3KHV2CAn0f-FWPYH7w7lTM9ym54909Upm-h_G9W--o_I431bc9U3icg&sz=w528-h148&ats=1520250594056&rm=161f5fb79e36447b&zw&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:"Arial",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