Feb 24, 2026·7 min read

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

Outlook's rendering engine is Microsoft Word. That sentence explains everything — and nothing feels right once you know it. Here's exactly what breaks, why, and the fixes that actually work in React Email, MJML, and raw HTML.

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.

display: flex / gridSilently ignored

Why: Outlook uses Microsoft Word's rendering engine (since 2007). Word has no concept of flexbox or grid — it simply ignores both declarations.

Fix: Use tables. In MJML, <mj-section> and <mj-column> compile to tables automatically. In React Email, use <Row> and <Column>.

border-radiusUnpredictable

Why: Word's rendering engine doesn't support CSS border-radius. The property is parsed but has no effect on rendered output.

Fix: Use a VML (Vector Markup Language) fallback inside conditional comments, or accept that Outlook will render sharp corners.

background-imageSilently ignored

Why: Outlook strips CSS background images on most elements. Images must be placed as actual <img> tags or use VML for background images on <td> elements.

Fix: Use <v:rect> VML inside <!--[if mso]> conditional comments for hero background images in Outlook.

<style> blocksUnpredictable

Why: Outlook on Windows respects <style> blocks, but Gmail strips them entirely — and this inconsistency trips up many developers who forget to test both.

Fix: Inline all critical styles. Use a tool that inlines automatically, or restrict <style> to non-critical declarations only.

margin: auto (centering)Unpredictable

Why: Outlook respects margin: auto on block elements in some contexts but ignores it on <td> elements and in others. Centering behaviour is unpredictable.

Fix: Use align="center" on the containing <table> element, not CSS margin on inner elements.

Web fonts (@font-face)Unpredictable

Why: Outlook on Windows and mobile Outlook apps do not support @font-face or Google Fonts. Only system fonts are guaranteed to render.

Fix: Always include a system font fallback stack: font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif

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:

MJML

<!-- 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>

React Email

// 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 15 clients — which is why it's worth fixing first.

See exactly what Outlook breaks in your email

Paste your email and get a full compatibility report across 12 clients — including Outlook-specific fix snippets for your framework.

Preview your email

Free plan — 30 previews/day