How to build Outlook-safe email buttons that actually render

Every email marketer learns this the hard way: the gorgeous rounded button you styled with border-radius, padding, and background on an anchor tag renders as a flat text link in Outlook 2007–2021. The Word rendering engine Microsoft uses for those versions ignores padding on anchors, strips border-radius, and refuses to honor most modern CSS.

The fix is older than you think: nested tables with a VML rounded-rect fallback, also known as the "bulletproof button." Done right, it renders identically across Outlook, Gmail, Apple Mail, Yahoo, and mobile. Done wrong, you ship a broken CTA to 50 million inboxes.

Why this pattern exists

Microsoft Outlook on Windows renders HTML using Word's rendering engine, not a modern browser engine. That decision, made in 2007, hasn't changed in Outlook 2010, 2013, 2016, 2019, or 2021. The consequence: your email needs a 2007-compatible fallback and modern styling, without the two interfering.

Gmail, Apple Mail, Outlook.com (the web version), and every mobile client use modern engines. They render padding-on-anchor just fine. So the pattern is: use the old reliable markup, and let the modern clients ignore the parts they don't need.

The bulletproof button markup

html
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
    href="https://example.com"
    style="height:44px;v-text-anchor:middle;width:200px;" arcsize="10%"
    stroke="f" fillcolor="#121211">
  <w:anchorlock/>
  <center style="color:#ffffff;font-family:Arial,sans-serif;font-size:14px;font-weight:600;">
    Read more
  </center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<a href="https://example.com"
   style="background:#121211;color:#ffffff;display:inline-block;padding:12px 22px;
          border-radius:4px;text-decoration:none;font-family:Arial,sans-serif;
          font-size:14px;font-weight:600;">
  Read more
</a>
<!--<![endif]-->

The <!--[if mso]> conditional is only read by Outlook on Windows. The <!--[if !mso]> block is read by everyone else. The VML <v:roundrect> draws a real rounded rectangle in Outlook with the same dimensions. The <w:anchorlock/> tag makes the entire rectangle clickable.

The three things people get wrong

1. Missing `v-text-anchor:middle;`. Without it, button text collapses to the top of the VML shape in Outlook 2016+. The text looks aligned in a preview but ships cropped.

2. Using em or rem units. Outlook's Word engine treats em/rem unpredictably and can render a 14px button as 22px. Stick to pixels in the VML block and in the anchor fallback.

3. Forgetting `arcsize`. VML's border-radius is controlled by arcsize as a percentage of the smaller dimension, not pixels. For a 44px-tall button, arcsize="10%" ≈ 4px radius. Match it to your CSS border-radius for visual parity.

How to test without launching Outlook

Outlook-on-Windows licenses are not cheap, and Outlook's rendering is version-specific. The practical way to test:

• Litmus or Email on Acid subscriptions run every Outlook version and give you pixel-accurate screenshots.
• Draftship's render farm simulates the Word engine's CSS ruleset so you catch VML/media-query/padding issues before you send.
• Stress-test at 320px, the smallest mobile viewport. Buttons that wrap or overflow on narrow devices look broken next to Outlook's tight layout.

When to skip VML entirely

If your audience is 100% consumer (Gmail, Apple Mail mobile, Outlook.com web), VML is overkill, a plain padded anchor works. Check your ESP analytics: if Outlook desktop is under 5% of opens, you can skip it. For B2B, enterprise, and finance audiences, Outlook desktop is often 40%+ of opens, and VML is non-negotiable.

TL;DR

• Outlook on Windows uses Word's engine and ignores modern CSS on anchors.
• Wrap your button in MSO conditionals: <v:roundrect> for Outlook, styled <a> for everyone else.
• Use v-text-anchor:middle, arcsize, pixel units, and test at 320px.
• Skip VML only if Outlook desktop is a rounding error in your audience.