Mar 4, 2026·9 min read

Outlook Email Templates: What Works, What Breaks, and How to Fix It

"Outlook" is not one client — it's five different rendering engines. Here's what each version supports, the VML workarounds you need, and how to build templates that work across all of them.

Five Outlooks, five rendering engines

The name "Outlook" covers clients with fundamentally different rendering engines. An email that looks perfect in Outlook.com may be completely broken in Outlook 2019 on Windows.

Outlook Classic (Windows 2007–2021)

Microsoft Word

The most restrictive. Uses Word's rendering engine. Ignores flexbox, grid, border-radius, background-image, and dozens of CSS properties. Reaching end of life October 2026.

Outlook (New) for Windows

Chromium (Outlook Web)

Modern Chromium-based rendering engine with good CSS support. Uses the same engine as Outlook.com/365. Now the default Windows Outlook client. Test with outlook-windows in Emailens.

Outlook.com / 365 (Web)

Modern Web

Good CSS support. Supports most layout properties. Has its own sanitization but far less restrictive than Word.

Outlook for Mac

WebKit

Uses WebKit since 2019 update. Excellent CSS support, comparable to Apple Mail.

Outlook Mobile (iOS/Android)

Varies

iOS version uses WebKit. Android version has more restrictions. Both strip some CSS properties.

For the full CSS support breakdown, see the Outlook Classic compatibility reference.

Table-based layout is mandatory

For Word-based Outlook (2007–2021), tables are the only reliable layout mechanism. Every row, column, and content block should be a <table> /<tr> /<td>. Frameworks like MJML and React Email compile to tables automatically — see our Outlook CSS guide for detailed examples.

VML conditional comments

VML (Vector Markup Language) is Outlook's answer to features that CSS can't provide in Word's rendering engine. Conditional comments ensure VML only renders in Outlook:

Rounded buttons with VML

VML Button

<!-- Rounded button that works in Word-based Outlook -->
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
  xmlns:w="urn:schemas-microsoft-com:office:word"
  href="https://example.com/action"
  style="height:44px; v-text-anchor:middle; width:200px;"
  arcsize="14%"
  strokecolor="#000000"
  fillcolor="#000000">
  <w:anchorlock/>
  <center style="color:#ffffff; font-family:Arial,sans-serif;
    font-size:14px; font-weight:bold;">
    Get Started
  </center>
</v:roundrect>
<![endif]-->

<!--[if !mso]><!-->
<a href="https://example.com/action"
  style="background-color: #000; color: #fff; padding: 12px 24px;
  border-radius: 6px; text-decoration: none; font-family: Arial, sans-serif;
  font-size: 14px; font-weight: bold; display: inline-block;">
  Get Started
</a>
<!--<![endif]-->

Background images with VML

VML Background

<!-- Background image that works in Outlook -->
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"
  style="width:600px; height:300px;">
  <v:fill type="frame" src="https://example.com/hero-bg.jpg" />
  <v:textbox inset="0,0,0,0">
<![endif]-->

<div style="background-image: url('https://example.com/hero-bg.jpg');
  background-size: cover; background-position: center;
  max-width: 600px; padding: 60px 40px;">
  <h1 style="color: #ffffff; font-family: Arial, sans-serif;
    font-size: 32px; margin: 0;">
    Your hero content here
  </h1>
</div>

<!--[if mso]>
  </v:textbox>
</v:rect>
<![endif]-->

MSO-specific CSS properties

Outlook recognizes several proprietary CSS properties that can fix rendering quirks:

mso-line-height-rule: exactly

Forces exact line-height rendering. Without this, Outlook may add extra space above and below text.

mso-table-lspace: 0pt

Removes default left spacing Outlook adds to tables.

mso-table-rspace: 0pt

Removes default right spacing Outlook adds to tables.

mso-padding-alt

Alternative padding for Outlook when standard padding is ignored on certain elements.

Testing Outlook templates

Testing across all five Outlook versions manually is time-consuming. Emailens transforms your HTML per-client and flags every property that each Outlook version will ignore — with version-specific fix suggestions.

Test your template across all Outlook versions

See exactly what breaks in each Outlook version — with VML fixes and MSO-specific suggestions.

Preview your email

Free plan — 30 previews/day