Why Outlook Ignores Your CSS (and What to Do About It)

The root cause

Microsoft Outlook for Windows (2007 through 2021) renders HTML emails using the same engine that powers Microsoft Word, not a browser engine. This was a deliberate decision in 2007 when Microsoft replaced the Internet Explorer rendering engine with Word's. It has never been reversed.

The consequence: any CSS property that Word doesn't understand is silently dropped. No error, no fallback, no warning. The email just looks broken and you only find out if you test.

Outlook on Mac (2019+) and the web version of Outlook behave differently and have much better CSS support. The problematic clients are Outlook 2007-2021 on Windows, and mobile Outlook apps, which account for roughly 4% of global email opens, but often a much higher percentage in enterprise and B2B contexts where Windows is dominant.

The six things that break most often

These are ordered by how often they cause visible breakage, in our testing across production email templates.

What the fix looks like in practice

The most common mistake is trying to use flexbox for layout. Here's what to do in MJML and React Email instead:

<!-- This breaks in Outlook -->
<mj-section>
  <mj-column>
    <mj-text css-class="hero">Welcome!</mj-text>
  </mj-column>
</mj-section>

<mj-style>
  .hero { display: flex; align-items: center; }
</mj-style>

<!-- Do this instead , MJML compiles to tables automatically -->
<mj-section>
  <mj-column vertical-align="middle">
    <mj-text>Welcome!</mj-text>
  </mj-column>
</mj-section>

// This breaks in Outlook
<div style={{ display: 'flex', gap: '16px' }}>
  <img src="logo.png" />
  <p>Welcome to our app</p>
</div>

// Do this instead
import { Row, Column, Img, Text } from '@react-email/components';

<Row>
  <Column>
    <Img src="logo.png" width="48" height="48" />
  </Column>
  <Column>
    <Text>Welcome to our app</Text>
  </Column>
</Row>

The reliable approach

Rather than remembering every Outlook quirk by hand, the reliable approach is to test every email against Outlook before it ships. Emailens runs your HTML, MJML, or React Email source through a per-client transformation layer, flags every property that Outlook will ignore, and generates fix snippets in the same framework you're already using.

The compatibility score for Outlook is almost always the lowest of the 21 clients, which is why it's worth fixing first. If you already scoped Gmail-only CSS with u + .body, a matrix that still blames Outlook is wrong; see email client targeting CSS. For complex multi-column layouts, see our guide to Outlook ghost tables, check our deep-dive into Outlook CSS fallbacks for border-radius and gradients, master dark mode color shifting with our complete Dark Mode Email CSS guide, or explore our production-ready Outlook email templates.