Skip to main content

border-radius in Outlook Classic

UnsupportedMicrosoft Word · desktop

Fix & Workaround

Use VML (Vector Markup Language) for rounded buttons in Outlook.

Before

<a href="https://example.com"
  style="background-color: #6d28d9; color: #fff;
         padding: 12px 32px; border-radius: 6px;
         text-decoration: none; display: inline-block;">
  Click Here
</a>

After

<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
  href="https://example.com"
  style="height:44px; v-text-anchor:middle; width:200px;"
  arcsize="14%" strokecolor="#6d28d9" fillcolor="#6d28d9">
  <w:anchorlock/>
  <center style="color:#fff; font-family:Arial,sans-serif;
    font-size:14px; font-weight:bold;">Click Here</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<a href="https://example.com"
  style="background-color: #6d28d9; color: #fff;
         padding: 12px 32px; border-radius: 6px;
         text-decoration: none; display: inline-block;">
  Click Here
</a>
<!--<![endif]-->

Use VML to render rounded buttons in Outlook

Other Clients

ClientSupport
GmailSupported
Gmail AndroidSupported
Gmail iOSSupported
Outlook 365Supported
Outlook (New)Unsupported
Outlook iOSSupported
Outlook AndroidSupported
Apple MailSupported
Apple Mail iOSSupported
Yahoo MailPartial
Samsung MailSupported
ThunderbirdSupported
HEY MailSupported
SuperhumanSupported

Related Features

Test your email across all 15 clients

Preview rendering, catch CSS issues, and get actionable fixes — free.

Try Emailens Free