Previewing Outlook with Emailens
How Emailens previews Outlook 365 Web, Outlook (New), and Outlook Classic, including the Word-engine differences the preview reproduces.
Looking for the full per-feature CSS support data rather than how the preview works? See the Full CSS support reference on emailens.dev.
Outlook has three variants with two different rendering engines.
Variants
| ID | Platform | Engine | Dark mode | Status |
|---|---|---|---|---|
outlook-web | Webmail (browser) | Outlook Web | Yes | Active |
outlook-windows | Desktop app (New) | Outlook Web | Yes | Active , replacing Classic |
outlook-windows-legacy | Desktop app (Classic) | Microsoft Word | Yes | Supported to at least 2029 |
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 background-image,box-shadow, flexbox and gridpositionpartlytransform,animation, andtransitionare stripped
Dark mode , applies partial color inversion; use [data-ogsc]/[data-ogsb] overrides to control rendering.
Outlook Classic (Word engine)
Outlook Classic (2007–2021) uses Microsoft Word to render HTML. This is the most restrictive major email client. It is no longer the Windows default from April 2026 but is supported to at least 2029, and businesses move on their own schedule, so plan for both.
- No
border-radius, Word doesn't support rounded corners - No
flexboxorgrid, use tables exclusively - No
box-shadow, no shadow support at all - No
opacity, transparency is not supported - No
background-imageon most elements , use VML for background images - Limited
max-width, partial support only - No
box-sizing,box-sizing: border-boxis ignored - Dark mode , Outlook Classic applies full color inversion; use
[data-ogsc]/[data-ogsb]overrides to control rendering
Recommendations for Outlook Classic
- Use table-based layouts exclusively
- Use VML (Vector Markup Language) for rounded corners and background images
- Set explicit widths in pixels (not percentages) for reliable sizing
- 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.
Previewing Gmail with Emailens
How Emailens previews Gmail Web, Android, and iOS: which variants are covered, what the preview transforms, and how to read the results.
Previewing Apple Mail with Emailens
How Emailens renders Apple Mail on macOS and iOS, and what its WebKit engine means for your previews.