Blog/Tutorial

How to Create an Outlook-Compatible HTML Email (2026 Guide)

April 3, 2026·10 min read

Outlook is used by over 400 million people, primarily in corporate environments. If your email renders poorly in Outlook, you lose a massive portion of your target audience.

The problem? Outlook does not use a web rendering engine like Chrome or Firefox. Since Outlook 2007, Microsoft chose to use the Microsoft Word rendering engine to display HTML emails. The result: many modern CSS rules are ignored or misinterpreted.

Table of Contents

  1. Why Outlook is different
  2. Rule #1: Always use tables
  3. Rule #2: Inline CSS only
  4. Rule #3: Explicit widths everywhere
  5. MSO conditional comments
  6. Background images with VML
  7. Fonts and typography in Outlook
  8. Images in Outlook
  9. Testing your email
  10. FAQ

1. Why Outlook causes so many problems

Outlook versions 2007 through 365 (on Windows) use Word's rendering engine. This engine was designed for office documents, not web HTML. It ignores or incorrectly interprets many CSS properties.

  • Outlook 2007, 2010, 2013 — Word 12/14/15 rendering engine
  • Outlook 2016, 2019, 2021 — Word 16 rendering engine
  • Outlook 365 (Windows) — Word 16 engine (being migrated to Chromium)
  • Outlook on Mac, iOS, Android — use webkit → much better CSS support
💡 Good news: Microsoft is migrating Outlook 365 to an Edge (Chromium) based renderer. But the migration is gradual, and older versions will remain in corporate use for years. It's still best to code for the Word engine.

2. Rule #1: Use tables for layout

Forget div, flexbox, grid, and float. In Outlook, the only reliable way to create columns and structured layouts is to use HTML tables.

  1. A full-width outer table as the global container
  2. An inner table (600–680px max) to constrain content width
  3. <tr> and <td> for each row and column
  4. cellpadding="0" and cellspacing="0" on all tables
  5. border="0" to avoid default borders
⚠️ Never use: CSS display: flex, display: grid, float, position: absolute/relative, transform, transition, animation. Outlook ignores all of these.

3. Rule #2: All CSS must be inline

Outlook strips <style> tags from the <head>. Every CSS property must be applied directly via the style="" attribute on each element.

4. Rule #3: Explicit widths everywhere

Outlook doesn't automatically calculate column widths like a browser does. You must explicitly set the width in pixels on each <td>, both via the HTML width attribute AND the inline style: <td width="280" style="width:280px">.

5. MSO Conditional Comments

MSO conditional comments are HTML code blocks that only Outlook reads. They allow you to apply styles or code specifically for Outlook without affecting other clients.

  • <!--[if mso]> ... <![endif]--> — read by Outlook only
  • <!--[if !mso]><!--> ... <!--<![endif]--> — ignored by Outlook
  • <!--[if gte mso 9]> — Outlook 2007 and above

6. Background Images with VML

Outlook doesn't support background-image in CSS. To display a background image in Outlook, you need to use VML (Vector Markup Language), a Microsoft format supported by the Word engine. It's complex to write manually — which is why good email generators like MailBuildr handle it automatically.

No more Outlook headaches

MailBuildr automatically generates Outlook-compatible HTML, with VML, tables, inline CSS and MSO comments. Create your email in minutes — without touching a line of code.

Try MailBuildr for free →

7. Fonts and typography in Outlook

Outlook only supports system fonts installed on the user's computer. Google Fonts, Adobe Fonts, and other web fonts don't work.

  • Arial, Helvetica, sans-serif
  • Georgia, Times New Roman, serif
  • Courier New, monospace
  • Verdana, Tahoma, sans-serif
💡 Recommended font stack: Always define a font stack with a primary font + fallbacks: font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;.

8. Images in Outlook

Outlook blocks images by default. Best practices:

  • Always define a descriptive alt attribute
  • Set width and height as HTML attributes (not just CSS)
  • Add style="display:block" to prevent whitespace below images
  • Host images on a reliable server with an absolute URL (https://)
  • Add border="0" to avoid blue borders on linked images

9. How to test your email in Outlook

  • MailBuildr (free) — built-in preview + Outlook compatibility score
  • Litmus — screenshots in 90+ email clients including all Outlook versions (paid)
  • Email on Acid — similar to Litmus
  • Outlook Desktop — if you have access to a Windows PC with Outlook installed

10. FAQ

What is the maximum width for an Outlook email?

The standard width is 600px. Outlook displays emails in a reading pane that can be narrow. Beyond 600px, horizontal scrollbars may appear.

Will Outlook 365 finally support modern CSS?

Microsoft is working on migrating to a Chromium engine for "New Outlook". Some users are already on this version. But older versions (2016, 2019, 2021) will continue to be used in enterprises for a long time due to perpetual licenses.

Why does my email look fine in Gmail but broken in Outlook?

Gmail and Outlook use completely different rendering engines. Gmail (web) is Blink, Outlook is Word. What works in one can fail in the other. The key is to use HTML specifically designed for emails — tables, inline CSS, no JavaScript — like the HTML generated by MailBuildr.

Ready to start?

Create professional HTML emails without coding

Visual builder, built-in AI, guaranteed Gmail compatibility. Free to start.

Try MailBuildr →
← Back to blog