Loading...
Started by Heather Schleicher • Aug 1, 2025 7:31 PM
Total Replies
2
Participants
3
Activity
Quiet
Duration
7:31 PM
Thread starter
border-radius in HTML email unless you implement a VML workaround. That means:border-radius (Stack Overflow, Microsoft Q&A). So even if you set border-radius: 5px; inline, Outlook will simply ignore it.<a> tags with border-radius work in many clients—but Outlook Windows will show them with square corners by default.<!-- Outlook (MSO) fallback with VML -->
<!--[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="10%" stroke="f" fillcolor="#0078D4">
<w:anchorlock/>
<center style="color:#fff;font-family:Arial, sans-serif;font-size:16px;">
Click Me
</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-- -->
<a href="https://example.com" style="
display:inline-block;
background:#0078D4;
color:#fff;
font-family:Arial,sans-serif;
font-size:16px;
line-height:44px;
text-align:center;
text-decoration:none;
padding:0 20px;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;">
Click Me
</a>
<!--<![endif]-->
<v:roundrect> draws the rounded rectangle in Outlook (MSO).arcsize percentage sets the curvature.<a> tag with inline border-radius works in other email clients that support it (Campaign Refinery, Erkan Altınörs).border-radius unsupportedUse VML (<v:roundrect>) within conditional commentsOther email clients (Gmail, Apple Mail, Outlook Web, mobile)✅ Regular CSS worksInline <a> tag styled with border-radiusborder-radius.<!--[if mso]>...<![endif]--> for rounded corners, plus a standard styled link for other clients.