Definition
Outlook is Microsoft's email client and the single most challenging client for email designers due to its unique rendering engine. Outlook 2007 through 2021 uses Word's HTML rendering engine rather than a standard browser engine, resulting in severe CSS limitations. Understanding Outlook's quirks is essential for anyone building cross-client email campaigns because it remains a significant share of the desktop email client market.
The Word rendering engine lacks support for fundamental CSS properties. background-image is not supported on divs, tables, or table cells. border-radius is ignored, making rounded corners impossible without VML. padding is handled inconsistently on buttons and links. float, position, and margin properties are interpreted differently than in web browsers. Media queries, CSS animations, and modern CSS selectors are not supported at all. These limitations require fallbacks for nearly every visual element.
Outlook on Windows differs significantly from Outlook on Mac. Outlook for Mac uses the WebKit rendering engine and supports standard CSS properties including background-image, border-radius, padding, and media queries. Conditional comments and VML do not work in Outlook for Mac because they rely on the Word engine. Testing must therefore cover both Windows Outlook (Word engine) and Mac Outlook (WebKit engine) as they are effectively different clients.
Best Practices
Test every email in multiple versions of Outlook including 2013, 2016, 2019, and 365 on Windows, plus Outlook for Mac. Rendering can vary subtly between versions and the differences are hard to predict.
Use VML for any design element that requires background images, rounded corners, or precise button padding in Outlook. VML wrapped in <!--[if mso]> conditionals provides the only reliable Outlook fallback.
Avoid complex multi-column layouts in Outlook. Stack columns vertically in a single column for Outlook. More than two columns often break or misalign in the Word rendering engine.
Keep CSS inline for Outlook compatibility. Outlook ignores embedded <style> blocks in some versions and may strip class-based selectors. Inline CSS on table cells ensures styles are applied.
Set explicit widths on all table cells. Outlook may collapse empty cells or distribute width unpredictably. Width attributes on <td> elements are more reliable than CSS width properties.
Related Glossary Terms
Email Apple Mail
Apple's email client for macOS and iOS, known for the best CSS support among major email clients due to its WebKit rendering engine.
Email Background Image
A background image applied to an email's table cell or container, requiring VML fallbacks for Outlook due to its lack of CSS background-image support.
Email Bulletproof Button
A cross-client email button technique using VML for Outlook and standard HTML for all other clients, ensuring consistent appearance and clickability.
Email Conditional
Proprietary conditional comments used to target Microsoft Outlook with specific HTML or VML code for cross-client email rendering.
Email Ghost Table
A responsive email technique using hidden tables to conditionally show or hide content for mobile and desktop layouts across all email clients.
Email Gmail CSS
The subset of CSS supported by Gmail, which strips most `<style>` block rules and requires inline CSS for reliable rendering across web and mobile.
Frequently Asked Questions
When Outlook 2007 was developed, Microsoft chose to use Word's rendering engine for security and consistency with the Office suite. This decision was carried through Outlook 2010, 2013, 2016, 2019, and 365. There is no indication that Microsoft will change this architecture.
Outlook on Windows does not support `@media` queries, so traditional responsive email techniques do not work. Responsive behaviour in Outlook must be achieved through ghost tables, fluid hybrid layouts, or by accepting a fixed-width desktop layout.
Font properties (`font-family`, `font-size`, `color`, `font-weight`), text properties (`text-align`, `text-decoration`, `line-height`), and basic table properties (`width`, `bgcolor`, `align`) work reliably. Avoid `margin`, `float`, `position`, `display`, `background-image`, and `border-radius`.
No. Outlook does not support `@font-face` or web fonts. It falls back to the system fonts specified in the `font-family` stack. Include standard fallback fonts like Arial, Helvetica, and Times New Roman in your font stack.
Use `align="center"` on the parent `
` elements rather than `margin: 0 auto`. Outlook often ignores CSS margin-based centring. The HTML `align` attribute is more reliable for table and cell centring.Start Measuring Your Email PerformanceConnect your email platform and get instant campaign reports. No credit card required. Start Your 7-Day Free Trial |