Microsoft Outlook uses the Word rendering engine for desktop clients, creating unique challenges for email developers. This guide covers conditional comments, MSO properties, VML, DPI scaling, and battle-tested workarounds to make your emails look great in every version of Outlook.
The desktop versions of Microsoft Outlook (2007–2019 and Office 365 desktop) use Microsoft Word as their rendering engine rather than a web browser engine. Word was designed for print-like document layout, not for interpreting modern HTML and CSS. This means properties like float, position, max-width, flexbox, and grid are completely unsupported.
Although Outlook's overall market share has declined (averaging around 5% globally), it remains dominant in corporate environments where B2B email campaigns are critical. Ignoring Outlook rendering means risking broken layouts for a significant portion of business-oriented recipients.
The good news: Outlook is reliably frustrating. The quirks are well-documented and the workarounds are proven. Once you learn the patterns — tables for layout, MSO properties for fine-tuning, VML for backgrounds and buttons — you can handle any Outlook rendering challenge.
Uses Microsoft Word as the rendering engine. Most restrictive in terms of CSS support. Additionally, Windows users on 120 DPI settings will see scaled-up elements that can break layouts. This is the primary target for all Outlook-specific fixes.
Uses WebKit as the rendering engine, which means it behaves similarly to Apple Mail and Safari. Generally reliable and rarely requires special workarounds.
These clients use WebKit or Blink-based rendering engines and provide good HTML rendering. They don't usually break your emails. Note: Outlook.com prepends x_ to all CSS class names.
Microsoft's unified client uses a web browser engine instead of Word. Available since 2023 in the Windows App Store. Much better CSS support, but legacy desktop clients will still need to be supported for years to come.
These are the issues you'll encounter most frequently when coding HTML emails for Outlook desktop clients.
The most notorious Outlook bug. White horizontal lines appear seemingly at random, particularly in sections with odd-numbered heights or font sizes. This is caused by Word's rendering engine adding page breaks.
Change font sizes and line heights to even numbers. Add a ghost break using <!--[if mso]><br style="mso-line-height-rule:exactly; line-height:0;"><![endif]-->. Alternatively, match background colors on problem sections, or add mso-line-height-rule:exactly to the containing element.
Outlook ignores CSS width/height on images and renders them at their native resolution. If you use retina images (2×), they will appear twice as large and break your layout.
Always set width and height as HTML attributes on your <img> tags: <img src="image.jpg" width="300" height="200" alt="...">. Only the width attribute is strictly necessary — Outlook will maintain the aspect ratio automatically.
Outlook strips padding from many elements and ignores margins inconsistently. Padding on <div> tags is completely disregarded since Outlook doesn't support styling on divs.
Use table cells for spacing and structure. Apply padding to <td> elements instead of <div> or <img> tags. For images, add padding to the containing table cell, not the image itself. Use the ghost table technique to wrap divs in Outlook-specific tables.
Outlook does not support web fonts. Worse, if a custom font is listed first in the font-family stack, Outlook skips all fallback fonts entirely and defaults to Times New Roman.
Use attribute selectors to override the font stack: a[x] { font-family: 'CustomFont', Arial, sans-serif; }. This works because Outlook ignores attribute selectors, so it reads the original safe stack. Alternatively, wrap text in a <span> with the safe stack and apply the custom font via MSO conditional code.
Outlook 2007–2013 do not support animated GIFs and will only display the first frame. Outlook 2016 and 2019 added GIF support, but older clients remain in use.
Design your GIF so the first frame includes your key message or CTA. Alternatively, use MSO conditional code to hide the GIF and display a static fallback image for Outlook desktop clients.
Outlook desktop clients (except Outlook 365 and Outlook.com) do not render background-image. This affects hero sections, buttons with background graphics, and decorative patterns.
Use VML (Vector Markup Language) to render background images in Outlook. Wrap your VML code in MSO conditional comments so it only targets Outlook desktop, while the CSS background-image works for all other clients. See the VML section below for full code examples.
A bug in Outlook 2016 adds a 1-pixel border around table cells, which disrupts pixel-perfect layouts.
Add border-collapse: collapse; to your table styles, either inline or in an embedded style block. This collapses adjacent cell borders into a single border and removes the unwanted gap.
When using <div>-based layouts with display:inline-block for responsive stacking, Outlook ignores the div styling and renders everything at 100% width.
Use the ghost table technique: wrap your div columns inside Outlook-specific conditional tables. The divs handle modern clients with responsive stacking, while the ghost tables maintain the column layout in Outlook. <!--[if mso]><table><tr><td width="300"><![endif]--> your div content <!--[if mso]></td></tr></table><![endif]-->
Conditional comments are HTML comments that only Microsoft Outlook desktop clients (2007–2019, Office 365 desktop) interpret. They allow you to show or hide content specifically for Outlook, and even target individual versions. This is your most powerful tool for creating Outlook-specific workarounds without affecting other email clients.
<!--[if mso]>
<p>This content is only visible on Outlook desktop clients</p>
<![endif]--><!--[if mso 14]>
<p>Only visible on Outlook 2010</p>
<![endif]-->
<!--[if (gte mso 9) | (lte mso 11)]>
<p>Visible on Outlook 2000 to Outlook 2003</p>
<![endif]-->MSO version numbers mapped to Outlook releases:
<!--[if !mso]><!-->
<p>Visible on everything except Outlook desktop</p>
<!--<![endif]-->[class~="x_foo"] {
/* Styles for Outlook.com and Office 365 web only */
}Outlook.com and Office 365 web prepend x_ to all CSS class names but don't apply this to attribute selectors. You can exploit this difference to target only Outlook web clients.
MSO (Microsoft Office) properties are CSS-like properties that only Outlook desktop clients recognise. They give you fine-grained control over line heights, padding, font sizes, and visibility that standard CSS cannot achieve in Outlook.
Forces Outlook to respect your declared line-height value. Without this property, Outlook may add extra spacing to lines. Apply it inline immediately before your line-height declaration.
Declares padding values specific to Outlook desktop. Use when normal CSS padding renders incorrectly on Outlook. Accepts the same shorthand as regular padding (top right bottom left).
Sets a font size that only Outlook uses. Useful when Outlook renders your font slightly larger than other clients, causing text reflow issues.
Hides content from all Outlook desktop clients. Note: this property is stripped when the email is forwarded, so pair it with <!--[if !mso]> conditional code for reliability.
VML (Vector Markup Language) is Microsoft's deprecated vector graphics language that is still supported in Outlook desktop clients. It is the only way to achieve CSS background images, rounded-corner buttons, and gradient backgrounds in Outlook 2007–2019. Always wrap VML code in MSO conditional comments.
<html lang="en"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"><!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml"
fill="true" stroke="false"
style="width:600px; height:300px;">
<v:fill type="frame"
src="https://example.com/bg.jpg"
color="#333333" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div style="background-image:url('https://example.com/bg.jpg');
background-size:cover; padding:40px;">
<p style="color:#ffffff;">Your content here</p>
</div>
<!--[if mso]>
</v:textbox>
</v:rect>
<![endif]-->This creates a 600×300px container with a background image that works in Outlook desktop, with a CSS background-image fallback for all other clients.
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:w="urn:schemas-microsoft-com:office:word"
href="https://example.com"
style="height:44px; v-text-anchor:middle; width:200px;"
arcsize="10%"
strokecolor="#1a73e8"
fillcolor="#1a73e8">
<w:anchorlock/>
<center style="color:#ffffff;
font-family:Arial,sans-serif;
font-size:16px; font-weight:bold;">
Click Here
</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<a href="https://example.com"
style="background-color:#1a73e8;
border-radius:4px; color:#ffffff;
display:inline-block; padding:12px 24px;
font-size:16px; font-weight:bold;
text-decoration:none;">
Click Here
</a>
<!--<![endif]-->This creates a button that renders with rounded corners in Outlook using VML, and uses a standard CSS button for all other email clients. The design is consistent across clients.
Windows users can set their display to 120 DPI (125% scaling) or higher, which causes Outlook desktop clients to scale up text and graphics unevenly. Images may appear oversized, tables may break, and spacing becomes inconsistent. This three-step fix resolves most 120 DPI rendering issues.
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:o="urn:schemas-microsoft-com:office:office"><!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->Using style="width:600px;" instead of width="600" on tables ensures that DPI scaling applies consistently to both the table and its contents, preventing layout breaks at 120 DPI.
Tables remain the most reliable layout method for Outlook. Use <table>, <tr>, and <td> for structure. If you prefer div-based coding, always add ghost tables (MSO conditional tables) for Outlook fallback.
Define width (and optionally height) as HTML attributes on every <img> tag. Outlook ignores CSS dimensions and will render images at their native size, breaking responsive layouts.
Put your custom/web font inside an attribute selector or media query, and keep the primary font-family declaration as a system-safe stack (Arial, Helvetica, sans-serif) to prevent the Times New Roman fallback.
Outlook blocks images by default until the recipient clicks “Download Pictures”. Well-crafted alt text ensures your email still communicates its message even with images disabled.
There are at least 8 distinct Outlook rendering environments. Test in Outlook 2013, 2016, 2019, Office 365 desktop, Outlook.com, Outlook for Mac, and the New Outlook. Use tools like Litmus or Email on Acid for comprehensive cross-client testing.
This prevents Outlook from adding phantom 1-pixel borders around table cells. Apply it as an inline style on every <table> element: style="border-collapse:collapse;".
Coding HTML emails for Microsoft Outlook requires a specialised approach that differs from standard web development. The Word rendering engine used by Outlook 2007 through 2019 and Office 365 desktop clients does not support modern CSS properties like flexbox, grid, or max-width. Instead, email developers must rely on table-based layouts, MSO conditional properties, and VML (Vector Markup Language) for backgrounds and bulletproof buttons. Understanding the differences between Outlook's multiple rendering engines — Word for desktop, WebKit for Mac and mobile, and browser-based for the New Outlook — is essential for delivering pixel-perfect email campaigns across all Microsoft email clients.
EmailDeer specialises in hand-coded HTML email development with deep expertise in Outlook rendering. We test every template across 50+ email clients including all Outlook versions, apply DPI scaling fixes, implement VML backgrounds and buttons, and ensure your brand looks consistent from Outlook 2013 to the New Outlook. Whether you need a single campaign template or ongoing production support, our team handles the Outlook-specific complexity so you can focus on strategy and creative direction.
We hand-code every email to render flawlessly across all Outlook versions. Get in touch and we'll handle the Word rendering engine so you don't have to.
Hand-coded HTML emails that drive clicks, impress clients, and build trust. Expert craftsmanship for brands that care about quality.
EmailDeer is a service by
bullgrape.com
.