Outlook HTML Email Guide | EmailingSimply

Why Outlook is different

Outlook on Windows (2007–2021, and the classic version of Outlook 2024) does not use a browser engine to render HTML email. It uses the Microsoft Word rendering engine.

Word was designed for documents, not web pages. It has limited CSS support and does not understand many modern web techniques. This is why email HTML that looks correct in Gmail, Apple Mail, and every browser often breaks in Outlook.

The Outlook family

There are several email clients called "Outlook" with different rendering engines:

Client	Rendering engine
Outlook 2007-2021 (Windows)	Word (MSO)
Outlook 2024+ new (Windows)	Edge/Chromium
Outlook for Mac	WebKit
Outlook.com (web)	WebKit/Blink
Outlook for iOS	WebKit
Outlook for Android	Chrome

When email developers say "Outlook problems," they almost always mean Windows Outlook 2007-2021. The other clients behave reasonably like browsers.

CSS properties with no support

Outlook (Windows) does not support:

background-image in CSS (use VML)
border-radius
CSS transforms
Flexbox and Grid
CSS animations
max-width on tables (use width instead, or both)
padding on <p> elements reliably (use <td> padding instead)
margin: 0 auto for centering (use align="center" on <td>)

Table-based layout

Always use <table> for layout in Outlook. Nested tables work correctly.

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
  <tr>
    <td>Content here</td>
  </tr>
</table>

Use role="presentation" on layout tables to prevent screen readers from announcing table structure.

MSO conditional comments

Outlook (Windows) supports HTML conditional comments. These let you target styles or layout specifically to Outlook or non-Outlook clients.

<!--[if mso]>
  This content shows ONLY in Outlook
<![endif]-->

<!--[if !mso]><!-->
  This content shows in everything EXCEPT Outlook
<!--<![endif]-->

These are the most important tool for Outlook compatibility.

VML backgrounds

Outlook does not support background-image CSS. For background images, use VML (Vector Markup Language). VML is an XML-based format that only Outlook understands.

<!--[if gte mso 9]>
<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/bg.jpg" color="#ffffff"/>
  <v:textbox inset="0,0,0,0">
<![endif]-->

<div>
  <!-- Your content here, visible to all clients -->
</div>

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

VML buttons

CSS-styled buttons look correct in most email clients but can appear as plain text links in Outlook. Use VML to create bulletproof buttons for Outlook:

<!--[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="8%"
             stroke="f"
             fillcolor="#111111">
  <w:anchorlock/>
  <center style="color:#ffffff;font-family:Arial;font-size:15px;font-weight:bold;">
    Shop Now
  </center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td style="background-color:#111111;border-radius:4px;padding:12px 24px;">
      <a href="https://example.com"
         style="color:#ffffff;font-family:Arial;font-size:15px;font-weight:bold;text-decoration:none;display:block;">
        Shop Now
      </a>
    </td>
  </tr>
</table>
<!--<![endif]-->

The Button Generator tool in EmailingSimply creates this code for you.

Common Outlook bugs

Gaps between images

Images displayed block by default have gaps in Outlook. Fix with:

<img style="display:block;" ...>

Extra spacing on table cells

Remove spacing from table cells explicitly:

<table cellpadding="0" cellspacing="0" border="0">

And add mso-table-lspace and mso-table-rspace:

<table style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;">

Font size scaling in Windows Mail

Add this to your <head> to prevent font scaling:

<style>
  body { -ms-text-size-adjust: 100%; }
</style>

Line height issues

Use numeric multipliers for line-height rather than px or em:

<p style="line-height:1.6;">

Testing Outlook

The only way to verify Outlook rendering is to test in an actual Outlook installation. Options:

Local Outlook installation — requires Windows and an Outlook license
Litmus or Email on Acid — paid services that render screenshots in Outlook versions
Mailtrap or similar — some services offer Outlook preview

Do not assume browser-based email previews represent Outlook behavior.