← Back to blog
by Marco Chavez
outlookemail developmenthtml email

Why Emails Break in Outlook (And How to Fix It)

Outlook uses Word's rendering engine, not a browser. Learn why your HTML emails break and how to fix them with tables, inline styles, and conditional comments.

If you’ve ever built an HTML email, you know the pain: it looks perfect in Gmail, great on mobile, and then completely breaks in Outlook.

This isn’t a bug — it’s a fundamental difference in how Outlook renders emails.

The Problem: Word’s Rendering Engine

Outlook on Windows doesn’t use a browser engine to render emails. It uses Microsoft Word’s rendering engine.

Yes, Word — the document editor from 2007.

This affects:

  • Outlook 2007, 2010, 2013, 2016, 2019, 2021 (Windows desktop)
  • Outlook for Microsoft 365 (Windows desktop)

Outlook on Mac, iOS, and the web app use different (better) rendering engines. But the Windows desktop client is still the most common in corporate environments — and it’s the one that breaks everything.

What Breaks in Outlook

Here’s what you can’t rely on when targeting Windows Outlook:

Layout

  • display: flex and display: grid — completely ignored
  • max-width on block elements — unreliable
  • float — partially supported, inconsistent
  • CSS position — limited support

Spacing

  • padding on <p> tags — ignored
  • margin: auto for centering — doesn’t work
  • gap in flex/grid — irrelevant since flex/grid aren’t supported

Visual

  • background-image on <div> elements — not rendered
  • border-radius — partially supported (Outlook 2016+)
  • CSS box-shadow — ignored
  • linear-gradient backgrounds — ignored

Typography

  • Web fonts via @font-face — not supported
  • line-height on block elements — inconsistent

The result? A pixel-perfect design that renders as a stack of unstyled text blocks, missing images, and broken columns.

How to Fix It

There are three tools in your Outlook compatibility toolkit: tables, inline styles, and conditional comments.

1. Use Tables for Layout

Tables are the only reliable multi-column layout method in Outlook. This is the thing that feels most wrong, but it’s the reality.

<table
  role="presentation"
  width="600"
  cellpadding="0"
  cellspacing="0"
  border="0"
  align="center"
>
  <tr>
    <td width="300" valign="top">
      Left column
    </td>
    <td width="300" valign="top">
      Right column
    </td>
  </tr>
</table>

A few important details:

  • Always set role="presentation" so screen readers skip the table structure
  • Use width as an HTML attribute, not just a CSS property — Outlook respects HTML attributes more reliably
  • Set cellpadding="0" and cellspacing="0" to prevent default spacing
  • Use valign for vertical alignment instead of vertical-align CSS

2. Inline Your Styles

Outlook strips or ignores <style> blocks in many cases. The safest approach is to inline every critical style directly on the element.

Instead of this:

<style>
  .button { background: #4224ff; padding: 12px 24px; }
</style>
<a class="button" href="#">Get Started</a>

Do this:

<a
  href="#"
  style="background: #4224ff; padding: 12px 24px; display: inline-block; color: white; text-decoration: none;"
>
  Get Started
</a>

Yes, it’s verbose. Yes, it’s worth it. Every critical property — background color, padding, font size, color — should be inlined.

3. Use Conditional Comments for Outlook-Only Overrides

Conditional comments are an old IE feature that Outlook still supports. They let you inject HTML that only Outlook renders, while other clients ignore it entirely.

This is useful for wrapping layouts in a fixed-width table that Outlook needs, without breaking fluid layouts in modern clients:

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


  <!-- Your content here — fluid for modern clients, fixed for Outlook -->


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

You can also target specific Outlook versions:

<!--[if mso 16]>  Outlook 2007 only  <![endif]-->
<!--[if gte mso 9]>  Outlook 2000 and above  <![endif]-->
<!--[if lte mso 11]>  Outlook 2003 and below  <![endif]-->

4. Handle Background Images with VML

If you need a background image behind a section, plain CSS background-image won’t work in Outlook. You’ll need VML (Vector Markup Language) — another old Microsoft format that Outlook supports.

<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"
  style="width:600px; height:200px;">
  <v:fill type="frame" src="https://example.com/bg.jpg" color="#000028" />
  <v:textbox inset="0,0,0,0">
<![endif]-->


  <!-- Your foreground content -->


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

This is one of the more painful Outlook workarounds. For most use cases, a solid fallback background color is good enough.

The Outlook Testing Checklist

Before sending, run through these:

  • Layout built with tables, not flexbox or grid
  • All critical styles inlined
  • Conditional comments wrapping fixed-width wrappers
  • Background images have a solid color fallback
  • Width set as an HTML attribute on table cells, not just CSS
  • No web fonts (use system fonts: Arial, Georgia, Verdana, Times New Roman)
  • Tested in Outlook 2016+ on Windows

The Honest Take

Building Outlook-compatible emails is tedious. You’re essentially writing HTML from 2003 on purpose, for a client that still represents a large chunk of business email opens.

The three options are:

  1. Learn the patterns and write compliant HTML by hand (slow, error-prone)
  2. Use an inliner tool to post-process your HTML (covers inline styles, but not layout)
  3. Use a builder that generates compatible HTML from the start — so you never write a <table> by hand

If you’re building emails regularly, option 3 is worth it. The cognitive overhead of keeping Outlook quirks in your head while designing is real, and the bugs are subtle enough that they slip through even when you know what to watch for.

Maiilo generates Outlook-compatible HTML automatically — tables, inline styles, and conditional comments included. Start building for free →