The Outlook Button Problem#
Outlook on Windows uses Microsoft Word as its rendering engine, which ignores CSS border-radius, background-color on <a> tags, and most modern CSS. The only reliable solution is VML (Vector Markup Language).
The Bulletproof Button Code#
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:w="urn:schemas-microsoft-com:office:word"
href="https://example.com/cta"
style="height:44px; width:200px; v-text-anchor:middle;"
arcsize="10%"
fillcolor="#0066cc">
<w:anchorlock/>
<center style="color:#ffffff; font-family:Arial,sans-serif; font-size:16px; font-weight:bold;">
Shop Now
</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<a href="https://example.com/cta"
style="background-color:#0066cc; border-radius:4px; color:#ffffff;
display:inline-block; font-family:Arial,sans-serif; font-size:16px;
font-weight:bold; line-height:44px; padding:0 24px; text-decoration:none;">
Shop Now
</a>
<!--<![endif]-->
Key Parameters#
| VML Attribute |
Effect |
arcsize |
Corner rounding (10% ≈ 4px radius) |
fillcolor |
Button background |
height |
Button height |
v-text-anchor:middle |
Vertical center text |
AcelleMail Template Tip#
Save this as a block in AcelleMail's template library. When editing a campaign, insert the block and update only the href and label text — no need to re-code VML each time.
