Skip to main content
Emailens
Sign inTry Free
Blog
PK
·Founder, Emailens
X@PipolmPk·LinkedIn
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.

Quick Answer: The 5-Engine Outlook Rule

There are five distinct Outlook rendering engines. While Web, Mac, and New Outlook for Windows run on modern WebKit and Chromium engines, Classic Windows Outlook (2007-2024) still renders with Microsoft Word. Reliable templates require MSO conditional comments (<!--[if mso]>), table-based column constraints, and VML shapes for rounded buttons and background images.

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. Supported to at least 2029.

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
25 lines
<!-- 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
21 lines
<!-- 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. For an in-depth breakdown of CSS properties that break, see our Outlook CSS guide, or learn how to structure columns using Outlook ghost tables.

Frequently Asked Questions

Why do email templates render differently across Outlook versions?

Outlook is not one client: Classic Desktop Windows uses Microsoft Word (MSO), New Outlook for Windows and Web use Chromium, Mac Outlook uses WebKit, and mobile versions have unique sanitizers. An email that looks perfect in Outlook Web can look completely broken in Outlook 2019 on Windows.

How do I add background images to Outlook email templates?

Because desktop Outlook on Windows ignores CSS background-image, you must use Microsoft Vector Markup Language (VML) with a <v:rect> and <v:fill type='frame'> element wrapped in <!--[if mso]> conditional comments.

What are mso- CSS properties?

Microsoft Office CSS extensions like mso-line-height-rule: exactly; and mso-table-lspace: 0pt; tell Word's rendering engine to fix line height miscalculations and remove unwanted table cell margins.

How should I test Outlook templates across all 5 engines?

Use an automated rendering simulation suite like Emailens to preview Word MSO, Web, Mac WebKit, and mobile outputs simultaneously without needing 5 physical test machines.

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

Sources & Primary References:

Reviewed by Philippe KAM · Last updated: Sep 6, 2026

PK

Philippe KAM

Founder & Lead Engineer at Emailens

X@PipolmPkLinkedIn

Building next-generation email preview and QA infrastructure for developers. Focused on reverse-engineering rendering engines across Outlook (Word MSO & New Outlook), Gmail, and Apple Mail to eliminate email rendering bugs before dispatch.

Learn more about our team & testing methodology →Verified against engine v0.13