Building Bulletproof, Outlook-Safe HTML Emails

Why Does Outlook Break HTML Emails?

Since Microsoft Outlook 2007 (and continuing through Outlook 2010, 2013, 2016, 2019, 2021, and Office 365 on Windows desktop), Outlook uses Microsoft Word as its HTML rendering engine instead of Internet Explorer, Edge, or Chromium.

Because Word was designed for print documents and typography rather than web pages, it lacks support for modern CSS standards:

• No CSS Flexbox or Grid: Modern layout models fail completely, causing side-by-side columns to stack awkwardly or collapse.
• No border-radius support: Standard CSS rounded buttons appear as harsh, square boxes with truncated text.
• Ignored CSS margins and padding on divs: Word only recognizes cell padding inside explicit HTML <td> tags.
• CSS background-image failure: Standard background-image CSS rules are stripped entirely.
• DPI scaling distortion (120 DPI / 150% scaling): On high-resolution laptops, Outlook scales pixel widths unevenly, distorting table layouts.

The Solution: MSO Conditional Comments

To achieve both modern responsiveness for mobile devices and rigid stability in Outlook, professional email developers use MSO conditional comments. These tags are completely ignored by Apple Mail, Gmail, and Yahoo, but executed by Microsoft Word's rendering engine:

<!--[if mso]>
<table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<![endif]-->

<!-- Modern fluid table for mobile & Gmail -->
<table role="presentation" style="width: 100%; max-width: 600px;" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td style="padding: 20px;">Your content goes here</td>
  </tr>
</table>

<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->

This pattern is known as the "ghost table" or "hybrid fluid" design pattern. It enforces a strict 600px width in desktop Outlook while allowing the container to shrink gracefully on iPhones and Android devices.

Bulletproof CTA Buttons with VML

Because Word ignores border-radius, call-to-action buttons usually lose their pill or rounded appearance. The only reliable way to render rounded corners in desktop Outlook is using Vector Markup Language (VML):

<div>
  <!--[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:48px;v-text-anchor:middle;width:220px;" 
               arcsize="18%" 
               stroke="f" 
               fillcolor="#2563eb">
    <w:anchorlock/>
    <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
      Claim Your Offer &rarr;
    </center>
  </v:roundrect>
  <![endif]-->
  <a href="https://example.com" 
     style="background-color:#2563eb;border-radius:8px;color:#ffffff;display:inline-block;font-size:16px;font-weight:bold;line-height:48px;text-align:center;text-decoration:none;width:220px;-webkit-text-size-adjust:none;mso-hide:all;">
    Claim Your Offer &rarr;
  </a>
</div>

Notice the mso-hide:all; attribute on the anchor tag. This tells Outlook to hide the HTML link and display the vector-rendered <v:roundrect> button instead!