Outlook

Outlook has three variants with two different rendering engines.

Variants

Outlook 365 (Web) & Outlook (New)

Both use the same Outlook Web rendering engine. The new Outlook for Windows is Microsoft's Chromium-based replacement for classic Outlook, shipping as the default Windows mail client.

CSS support is good:

• Supports most box model properties
• Supports border-radius
• Partial background-image support
• Partial box-shadow support
• Limited flexbox support
• No display: grid
• position, transform, animation, and transition are stripped

Dark mode — applies partial color inversion; use [data-ogsc]/[data-ogsb] overrides to control rendering.

Outlook Classic (Word engine) — ⚠️ Deprecated

Outlook Classic (2007–2021) uses Microsoft Word to render HTML. This is the most restrictive major email client. Microsoft is replacing it with New Outlook by October 2026.

• No border-radius — Word doesn't support rounded corners
• No flexbox or grid — use tables exclusively
• No box-shadow — no shadow support at all
• No opacity — transparency is not supported
• No background-image on most elements — use VML for background images
• Limited max-width — partial support only
• No box-sizing — box-sizing: border-box is ignored
• Dark mode — Outlook Classic applies full color inversion; use [data-ogsc]/[data-ogsb] overrides to control rendering

Recommendations for Outlook Classic

1. Use table-based layouts exclusively
2. Use VML (Vector Markup Language) for rounded corners and background images
3. Set explicit widths in pixels (not percentages) for reliable sizing
4. Use mso- conditional comments for Outlook-specific styling:

<!--[if mso]>
<table><tr><td style="padding: 20px;">
<![endif]-->
  <div style="padding: 20px;">Content</div>
<!--[if mso]>
</td></tr></table>
<![endif]-->

As users migrate to New Outlook, the need for these workarounds will decrease.