Why Your Email Looks Broken in Outlook (And How to Fix It)

If you've ever sent a beautifully designed email only to watch it crumble in Microsoft Outlook, you're not alone. Outlook is the most notorious email client for rendering issues, and it's responsible for more broken layouts than every other client combined.

The root cause? Outlook for Windows doesn't use a browser engine to render HTML. It uses Microsoft Word's rendering engine. Yes, the same Word you use to write documents. And Word has very different ideas about how HTML and CSS should work.

What Breaks in Outlook

Here's the quick hit list of CSS properties that Outlook ignores or breaks:

• background-image — Word doesn't support CSS background images. Your hero sections with background photos? Gone.
• border-radius — Rounded corners don't exist in Word's world. Everything becomes sharp rectangles.
• max-width — Outlook ignores max-width entirely, which can blow out fluid layouts.
• padding on block elements — Padding behaves unpredictably on <div> and <p> tags. Sometimes it works, sometimes it doesn't.
• flexbox and grid — Modern layout CSS is completely unsupported.
• margin: 0 auto — Centering with auto margins doesn't work reliably.

Why Word Renders Email

Microsoft switched Outlook's rendering engine from Internet Explorer to Word back in Outlook 2007. The reasoning was that it made composing emails easier since Word was already the default email editor. But the side effect was catastrophic for email designers: every version of Outlook from 2007 through 2021 (and the desktop versions of Outlook in Microsoft 365) uses the Word rendering engine.

The newer "New Outlook" for Windows and Outlook.com use browser-based rendering, which is much better. But the classic desktop client still dominates in corporate environments, and you can't ignore it.

The Fixes That Actually Work

Use Tables for Layout

It feels like stepping back to 1999, but table-based layouts are the only reliable way to achieve consistent structure in Outlook. Use <table>, <tr>, and <td> for your grid:

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td width="50%" valign="top" style="padding: 20px;">
      <!-- Left column -->
    </td>
    <td width="50%" valign="top" style="padding: 20px;">
      <!-- Right column -->
    </td>
  </tr>
</table>

Always add role="presentation" so screen readers don't announce your layout tables as data tables.

Use VML for Background Images

Outlook supports Vector Markup Language (VML), a Microsoft-specific format. You can use it to add background images that work in Outlook:

<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"
  style="width:600px;height:400px;">
  <v:fill type="frame" src="https://example.com/bg.jpg" />
  <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
  <div style="background-image: url('https://example.com/bg.jpg'); max-width: 600px;">
    <!-- Content here -->
  </div>
<!--[if mso]></v:textbox></v:rect><![endif]-->

Tools like Buttons.cm can generate bulletproof VML buttons too.

Use MSO Conditional Comments

Outlook supports conditional comments that let you target only Microsoft Office (MSO) rendering:

<!--[if mso]>
  <table><tr><td width="600">
<![endif]-->
  <div style="max-width: 600px;">
    <!-- Your content -->
  </div>
<!--[if mso]>
  </td></tr></table>
<![endif]-->

This pattern is essential for fixing max-width issues. Outlook ignores the <div> max-width but respects the table width.

Inline Your Styles

Outlook strips <style> blocks in some cases, especially in Outlook.com (webmail). Always inline critical styles directly on elements:

<!-- Don't rely on this alone -->
<style>
  .heading { font-size: 24px; color: #333; }
</style>

<!-- Always inline the important ones -->
<h1 style="font-size: 24px; color: #333333; font-family: Arial, sans-serif;">
  Your Heading
</h1>

Use Fallback Fonts

Outlook doesn't support web fonts (loaded via @font-face or Google Fonts links). Always specify system font fallbacks:

font-family: 'Your Custom Font', Arial, Helvetica, sans-serif;

In Outlook, it will gracefully fall back to Arial, which looks clean and professional.

Testing Is Non-Negotiable

Even with all these fixes applied, you need to test. Outlook has subtle version differences — what works in Outlook 2019 might break in Outlook 2016. And the "New Outlook" renders differently from classic Outlook.

At Templated, we're building email testing directly into the platform so you can preview across 90+ email clients before you hit send. Until then, tools like Litmus or Email on Acid can catch Outlook-specific issues before your subscribers do.

The Bottom Line

Outlook's Word rendering engine isn't going away anytime soon. Millions of corporate users rely on classic Outlook daily. The good news: the workarounds are well-established. Use tables for layout, VML for backgrounds, conditional comments for width fixes, and always inline your styles.

Or, use a tool like Templated that generates Outlook-compatible HTML automatically, so you can focus on design instead of debugging rendering quirks.