Outlook-safe email buttons: the VML pattern and when to skip it

Classic Outlook for Windows draws email with Word's engine, which ignores border-radius and applies padding only to table cells. A button built from a padded, rounded link loses both there. The dependable fix is a VML rounded rectangle for classic Outlook plus a normal styled link for every other client. New Outlook does not need it.

Which Outlook versions are affected

Microsoft says Outlook 2007 took its HTML rendering from Word 2007. Litmus puts Outlook 2007 through 2019 and the desktop Microsoft 365 app on the Word engine, and new Outlook for Windows on a browser engine. No source we found says classic 2021 or 2024 changed engines, so treat every classic release as Word-based.

New Outlook for Windows is reported to handle HTML and CSS almost identically to Outlook on the web, and it ignores MSO conditional comments and VML.

Microsoft's migration page, last updated in February 2026, still describes new Outlook as opt-in and says classic installs stay supported until at least 2029. Plan to serve both engines until then.

The button markup

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

The <!--[if mso]> block is read only by Outlook's Word-based renderer, and the <!--[if !mso]><!--> block serves every other client the link. In the VML, href makes the shape a link, v-text-anchor:middle centers the label vertically, and <w:anchorlock/> keeps the shape's anchor from moving when the message is edited.

Four details that break buttons

• Two URLs. The link sits in both the VML and the anchor. Update both, and check that click tracking rewrites the VML one: Litmus warns that some platforms do not.
• arcsize. Microsoft defines it as a percentage of half the shorter side, but Campaign Monitor's generator and Litmus's sample both pair 10% with a radius of one tenth of the height. The readings differ by a factor of two (drawn below), so check the corner in an Outlook render.
• Fixed size and case. The shape has a set width and height, so size it for your longest label. Type the label in the case you want, because Microsoft's Word 2007 reference lists text-transform as unsupported.
• DPI scaling. At 120 DPI, Windows can distort fixed-pixel layouts. Litmus documents the fix: the Office namespace on the html tag, and PixelsPerInch set to 96 in an OfficeDocumentSettings block in the head.

When to skip VML

Litmus lists five button methods, and only VML keeps rounded corners in Outlook. The padding-based method (background, padding and border-radius on a table cell, link inside) needs no VML and stays square in Outlook, but only the link text is clickable.

Litmus's September 2026 client data puts Outlook at 3.48% of opens and Outlook.com at 0.29%, and cannot separate Outlook versions. Keep the VML if classic Outlook is a large share of your own list and rounded corners are part of the brand. Otherwise a square button saves a second URL to track.

How to test

Check the final HTML in classic and new Outlook previews. Litmus previews Outlook 2007 through 2019, Office 365, new Outlook for Windows and Outlook.com among others. The editor exports buttons in this pattern, and the email design page covers how we build for Outlook.