Outlook Desktop (2007–2019)

The most challenging email client to support. Outlook 2007–2019 on Windows uses Microsoft Word's HTML/CSS rendering engine (MSO) instead of a browser engine. This causes sweeping CSS incompatibilities that no other major client has.

Why Word's Engine?

Microsoft switched Outlook from IE's Trident engine to Word's rendering engine in Outlook 2007. The goal was tighter integration with Office documents, but the result was a giant step backward for HTML email. Word's engine was never designed for web rendering — it lacks support for core CSS layout primitives that every browser has supported for years.

Flexbox and Grid

Not supported at all. display: flex, display: grid, and all associated properties (gap, align-items, justify-content, etc.) are completely ignored. The fallback behavior is display: block, which stacks elements vertically.

Fix: Use HTML <table> elements for multi-column layouts in Outlook. Tables are the only reliable way to achieve side-by-side columns.

<!-- Instead of flexbox: -->
<table width="600" cellpadding="0" cellspacing="0">
  <tr>
    <td width="50%">Left column</td>
    <td width="50%">Right column</td>
  </tr>
</table>

border-radius

Not supported. Rounded corners are silently ignored. All elements render with square corners. There is no CSS workaround — use images or VML shapes for rounded elements if they're critical.

box-shadow and text-shadow

Not supported. Both properties are ignored. Use border or background color to create visual separation instead.

background-image

Partial support. Background images on <table> and<td> elements work when specified with the proprietarybackground attribute or VML. CSS background-image on<div> elements does not work.

<!-- VML background for Outlook: -->
<!--[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="tile" src="https://example.com/bg.jpg"/>
  <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
  <!-- content here -->
<!--[if gte mso 9]>
  </v:textbox>
</v:rect>
<![endif]-->

Media Queries

Not supported. @media rules are completely ignored. Responsive design via media queries won't work in Outlook desktop. Design for a fixed 600px width as a baseline.

CSS Variables

Not supported. Custom properties (--my-color) andvar() are ignored. Inline all values directly.

opacity

Not supported. Use RGBA colors instead of opacity for translucent elements: color: rgba(0,0,0,0.5).

position: fixed / sticky

Not supported. Avoid fixed/sticky positioning entirely in email.position: absolute and relative have partial support.

Outlook-Specific Conditional Comments

You can target Outlook specifically using HTML conditional comments — these are parsed only by the MSO engine and ignored by all other clients.

<!--[if mso]>
  <!-- This renders only in Outlook Desktop -->
  <table><tr><td>Outlook-only layout</td></tr></table>
<![endif]-->

<!--[if !mso]><!-->
  <!-- This is hidden from Outlook but shown everywhere else -->
  <div style="display:flex">...</div>
<!--<![endif]-->

Key Takeaways

• Use tables for multi-column layouts
• Inline all CSS styles — avoid relying on <style> blocks
• Avoid flexbox, grid, border-radius, box-shadow, opacity, transforms
• Use conditional comments to provide Outlook-specific fallbacks
• Test at 600px fixed width — media queries won't help you here
• Use VML for background images and rounded shapes