Outlook is one of the most widely used email clients, but its various versions render emails differently. Earlier versions, such as Outlook 2000–2003, used Internet Explorer as the rendering engine. With the release of Outlook 2007, the rendering engine shifted to Microsoft Word, which lacks support for many standard HTML and CSS properties and comes with its own set of bugs.
Both Internet Explorer and Microsoft Word have distinct limitations, which may cause emails to display incorrectly or appear distorted.
The fixes in this article mainly apply to classic Outlook for Windows, which uses Microsoft Word as its rendering engine. The new Outlook for Windows and Outlook on the web use a modern web-based rendering engine, so some CSS features may behave differently there.
Understanding the Different Outlook Rendering Engines
The fixes in this article mainly apply to classic Outlook for Windows, which uses Microsoft Word as its rendering engine. This includes Outlook 2007, 2010, 2013, 2016, 2019, and classic Outlook for Microsoft 365. Because Microsoft Word was not designed as a full web browser, it has limited support for many modern HTML and CSS properties commonly used in email design.
The new Outlook for Windows works differently. It is based on the Outlook web experience and uses Microsoft Edge WebView2, a modern web-based rendering engine. As a result, many CSS features that typically break in classic Outlook — such as CSS background images, rounded corners, animated GIFs, gradients, and advanced layout properties — are better supported.
Outlook on the web (Outlook.com and Microsoft 365 webmail) also uses a browser-based rendering engine similar to modern web browsers. This means emails generally render much closer to how they appear in clients like Gmail, Apple Mail, or modern Chromium-based browsers.
Because of these differences, rendering issues and fixes may vary significantly depending on which Outlook version your recipients are using.
Common Outlook Rendering Issues and Fixes
When designing your emails, keep the following common issues in mind:
Background Images and Button Styling in Outlook
-
⚠️Issue: Many versions of Outlook — particularly classic desktop versions that use Microsoft Word as the rendering engine — have limited support for CSS-based background images and modern button styles, such as rounded corners. To display these elements correctly, classic Outlook relies on VML (Vector Markup Language). Without it, background images may not render, and buttons can appear flat or broken.
While recent web versions of Outlook, such as Outlook.com and Microsoft 365 webmail, support CSS backgrounds, classic desktop versions still require fallbacks.
-
📉Impact:
- Background images may be missing.
- Buttons may lose styling, appearing as plain rectangles.
- Emails can look incomplete or visually inconsistent across Outlook versions.
-
🛠️Solution:
- Use a solid background color as a fallback.
- For full compatibility, use VML to render buttons and background images in classic Outlook desktop.
- Alternatively, use a static button image linked to a URL, or insert background visuals as regular
<img>blocks.
-
Background Images Examples:
- ❌ Standard CSS, works in modern clients but not classic Outlook desktop:
<table width="600" height="200" cellpadding="0" cellspacing="0" border="0" style="background-image:url('https://via.placeholder.com/600x200'); background-size:cover;"> <tr> <td align="center" valign="middle" style="color: #fff; font-size: 24px;"> This is a background image (CSS method). </td> </tr> </table>- ✅ VML fallback, works in classic Outlook desktop:
<!--[if gte mso 9]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:200px;"> <v:fill type="frame" src="https://via.placeholder.com/600x200" color="#cccccc"/> <v:textbox inset="0,0,0,0"> <![endif]--> <table width="600" height="200" cellpadding="0" cellspacing="0" border="0"> <tr> <td align="center" valign="middle" style="color: #fff; font-size: 24px;"> This is a background image (VML for Outlook). </td> </tr> </table> <!--[if gte mso 9]> </v:textbox> </v:rect> <![endif]--> -
Rounded Buttons Examples:
- ❌ Standard CSS button, not supported in classic Outlook desktop:
<table cellpadding="0" cellspacing="0" border="0"> <tr> <td align="center"> <a href="#" style="display:inline-block; background:#1a73e8; color:#fff; padding:12px 30px; border-radius:24px; text-decoration:none; font-family:sans-serif;"> Rounded Button </a> </td> </tr> </table>- ✅ VML button for classic Outlook desktop:
<!--[if mso]> <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="50%" strokecolor="#1a73e8" fillcolor="#1a73e8"> <w:anchorlock/> <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;"> Rounded Button </center> </v:roundrect> <![endif]--> <!--[if !mso]><!-- --> <a href="#" style="display:inline-block; background:#1a73e8; color:#fff; padding:12px 30px; border-radius:24px; text-decoration:none; font-family:sans-serif; font-size:16px; font-weight:bold;"> Rounded Button </a> <!--<![endif]-->
What is VML (Vector Markup Language)?
VML (Vector Markup Language) is an XML-based language developed by Microsoft for creating vector graphics such as shapes, lines, and backgrounds.
In the context of HTML emails, VML is used as a workaround to render background images and styled buttons in Microsoft Outlook, especially versions that use the Word rendering engine, such as Outlook 2007-2019 and classic Outlook for Microsoft 365.
Why is VML important in email design?
Classic Outlook does not support modern CSS properties like background-image or border-radius. VML allows email designers to:
- Display background images in table cells or divs.
- Create rounded buttons with custom styles.
- Control layout elements that would otherwise break.
When should you use it?
Use VML only when targeting classic Outlook desktop and when you need:
- Background images that appear reliably.
- Buttons with visual styling not supported natively.
For all other email clients, rely on standard HTML and CSS.
Image Blocking by Default
- ⚠️Issue: Outlook may block images unless the sender is trusted.
- 📉Impact: Emails may look empty or broken on first view.
- 🛠️Solution: Always add descriptive alt text and consider using background colors or HTML fallback content.
Outlook Image Resizing
- ⚠️Issue: Classic Outlook may render images at their original native size, ignoring CSS-defined widths. This is especially problematic when trying to scale down large, high-resolution images using only CSS - a common practice for supporting high-DPI displays.
-
📉Impact:
- Images may appear too large in classic Outlook.
- Layouts can break or become inconsistent across email clients.
-
🛠️Solution: To ensure consistent image sizing in Outlook, always use the
widthHTML attribute directly on the<img>tag. Outlook respects this attribute and will scale the height automatically to maintain proportions.
✅ Correct, resizes in classic Outlook:
<img src="image.jpg" width="300" style="width:300px;">
❌ Incorrect, classic Outlook may ignore this:
<img src="image.jpg" style="width:300px;">
width attribute and CSS style for maximum compatibility across all clients.Limited Animated GIF Support
-
⚠️Issue: Classic Outlook for Windows versions 2007–2016 only display the first frame of a GIF.
GIF animation is supported in newer Outlook for Microsoft 365 versions, Outlook mobile apps, and Outlook.com. In Outlook for Microsoft 365, playback may also depend on the user’s Windows animation settings. - 📉Impact: If key information appears in later frames, users won’t see it.
- 🛠️Solution: Ensure the first frame includes your CTA or most important message.
Inconsistent Font Rendering
- ⚠️Issue: In many desktop versions of Outlook, custom fonts are not supported. When you place a custom font first in your stack, Outlook may ignore the entire stack and default to Times New Roman, even if you've defined safe fallback fonts.
- 📉Impact: This results in inconsistent typography and can disrupt your email's branding, layout, and readability when viewed in Outlook.
-
🛠️Solutions:
-
✅ Use attribute selectors to override custom fonts:
Write your font stack as usual, but place your custom font last in the list. Then, add this CSS:[style*="CustomFont"] { font-family: 'CustomFont', Helvetica, serif !important; }This code ensures that email clients supporting attribute selectors, such as Gmail, Apple Mail, and most webmail services, will use your custom font if available. Classic Outlook ignores attribute selectors like
[style*="..."], so it will use the fallback fonts you specified.<html> <head> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine"> <style> div {font-family: Helvetica, sans-serif, 'Tangerine';} [style*="Tangerine"] { font-family: 'Tangerine', Helvetica, serif !important; } </style> </head> <body> <div style="font-family: Helvetica, sans-serif, 'Tangerine';font-size: 48px;">Custom font example</div> </body> </html> -
✅ Apply conditional CSS just for Outlook using MSO comments:
Alternatively, you can define your custom font stack in your CSS and use an MSO conditional statement to override it with standard system fonts specifically for Outlook.
<style> div { font-family: 'CustomFont', Helvetica, sans-serif; } </style> <!--[if gte mso 9]> <style type="text/css"> div { font-family: Helvetica, Arial, sans-serif !important; } </style> <![endif]--> - ✅ Or simply stick with standard system fonts such as Arial, Calibri, Times New Roman, or Verdana, which are fully supported across Outlook versions.
-
List Styling Issues in Outlook
- ⚠️Issue: Bullet points and numbers may not display as expected. Classic Outlook does not always preserve default list styling, particularly when lists are nested inside tables or divs.
- 📉Impact: Lists may appear as plain text with no bullets or numbers.
-
🛠️Solution: Use inline styles or fallback content. You can also manually add symbols, such as
•, or use<td>cells for faux list styling.
❌ Problematic HTML, may not display properly in classic Outlook:
<table>
<tr>
<td>
<ul>
<li>First point</li>
<li>Second point</li>
</ul>
</td>
</tr>
</table>✅ Improved HTML, Outlook-compatible faux list:
<table>
<tr>
<td style="font-family: Arial, sans-serif; font-size: 14px;">
• First point<br>
• Second point
</td>
</tr>
</table>Ghost Columns: Fixing Column Alignment in Outlook
- ⚠️Issue: Classic Outlook desktop often mishandles exact column widths in side-by-side layouts. Even responsive emails built with two columns, such as two-column layouts adding up to 600px, may appear misaligned or stacked incorrectly.
-
📉Impact:
- Columns may jitter, stack improperly, or display gaps.
- Layouts that render fine in webmail or mobile may break in classic Outlook desktop.
- 🛠️Solution: Wrap your column tables inside an Outlook-only fixed-width “ghost” table using MSO conditional comments. Outlook sees this ghost table and renders the columns, while other email clients ignore it, preserving responsive behavior elsewhere.
🎯 Example HTML
<table width="600" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="main_container">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center"><tr>
<td width="450">
<![endif]-->
<table width="450" align="left" border="0" cellpadding="0" cellspacing="0">
<tr><td>Left column content</td></tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td><td width="150">
<![endif]-->
<table width="150" align="right" border="0" cellpadding="0" cellspacing="0">
<tr><td>Right column content</td></tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->
</td>
</tr>
</table>Summary: Use ghost columns wrapped in MSO comments to enforce column widths in classic Outlook desktop without affecting the layout elsewhere. It’s a lightweight Outlook-specific fix that preserves a clean, responsive design everywhere else.
White Lines in Outlook Emails
- ⚠️Issue: Classic Outlook desktop may occasionally insert unexpected white horizontal lines between content blocks due to rounding errors in pixel-to-point conversions and inconsistent handling of table heights.
-
📉Impact:
- Unwanted gaps appear in layouts.
- Breaks visual flow and brand consistency.
- Hard to predict - may appear randomly.
- 🛠️Solutions, try one or more:
-
Use even pixel values, preferably multiples of 4
Setfont-size,line-height,padding, andheightto even numbers, preferably divisible by 4, to reduce rounding errors. -
Insert Outlook-specific ghost breaks
Prevent gaps with an MSO-only line break:<!--[if gte mso 12]><br /><![endif]-->
-
Use Microsoft-specific code
This snippet can help reduce unwanted gaps by explicitly collapsing table borders and spacing in Outlook:<!--[if gte mso 9]> <style type="text/css"> table { border-collapse: collapse; border-spacing: 0; } </style> <![endif]-->Add this code to your email
<head>section and test thoroughly. Depending on your layout, it may affect other elements, so always preview your email in Outlook before finalizing. -
Add a non-breaking space as a buffer
A common workaround is to add a non-breaking space ( ) just before closing the<td>tag:<table border="0" cellspacing="0" cellpadding="0"> <tr> <td> Your exclusive offer is waiting — click below to claim your discount!<br> </td> </tr> </table>This may add a small amount of extra space below your content, so be sure to preview and adjust your layout if needed.
-
Match background colors
Hide lines by setting the body and problematic table rows to the same background:<!--[if gte mso 9]> <style>body { background-color: #123456 !important; }</style> <![endif]-->
🎯 Combined Example
<!--[if (gte mso 9)|(IE)]>
<style>
table { border-collapse: collapse !important; border-spacing: 0 !important; }
</style>
<![endif]-->
<table width="600" cellpadding="0" cellspacing="0" border="0" style="background:#fff;">
<tr>
<td style="font-size:16px; line-height:16px; padding:0;">
Content above the line
<!--[if gte mso 12]><br /><![endif]-->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr><td>Content below the line</td></tr>
</table>
</td>
</tr>
</table>🛠 Quick Fix Cheat Sheet
| Issue | Quick Fix | Works In |
|---|---|---|
| Background images not displaying | Use a solid background color as a fallback. For full compatibility, use VML in the HTML/MJML editor. | Classic Outlook desktop |
| Buttons lose rounded corners | Use VML for styled buttons, or a button image linked to a URL. | Classic Outlook desktop |
| Images blocked by default | Always add descriptive alt text to images. Consider background color or HTML fallback. | All Outlook versions |
| Images display at wrong size | Set the width attribute on the <img> tag, not just CSS. Example: <img src="..." width="300">
|
Classic Outlook for Windows |
| Animated GIFs don’t play | Ensure the first frame of the GIF has your key message or CTA. | Classic Outlook 2007–2016 desktop |
| Fonts revert to Times New Roman | Use system fonts, or use attribute selectors for custom fonts: [style*="CustomFont"] { ... }. |
Classic Outlook desktop |
| Lists lose bullets or numbers | Use plain text bullets (•) or create faux lists using tables and inline styles. |
Classic Outlook desktop |
| Column layouts break or misalign | Use “ghost columns” with MSO conditional tables in HTML/MJML for Outlook desktop. | Classic Outlook desktop |
| White lines or gaps appear | Use even pixel values, MSO ghost breaks, collapsed table borders, and matching background colors. Combine multiple fixes if needed. | Classic Outlook desktop |