MSO attributes in Outlook emails
If you have ever opened an HTML email in Outlook and watched it fall apart, you already know the problem. Since Outlook 2007, Microsoft switched from using Internet Explorer to render emails to using Microsoft Word instead. That decision has haunted email developers ever since.
Word was built to render documents — not web pages. As a result, a large chunk of standard HTML and CSS simply does not work in Outlook. To fill the gaps, Microsoft introduced a set of proprietary CSS properties that all begin with mso-, short for Microsoft Office. Alongside these, they kept support for a mechanism called conditional comments, which lets you serve Outlook-specific HTML that no other email client will ever see.
Understanding both tools is essential if you want your emails to look great across all Outlook versions.
Conditional comments
Conditional comments are the foundation of Outlook-specific code. They are HTML comments with special syntax that only Outlook's Word-based renderer understands. Every other email client treats them as regular comments and ignores the content inside.
The basic structure looks like this:
<!--[if mso]>
<p>Only Outlook sees this</p>
<![endif]-->
You can also target specific Outlook versions using comparison operators:
| Operator | Meaning |
|---|---|
mso | Any version of Outlook |
lt | Less than a specific version |
gt | Greater than a specific version |
lte | Less than or equal to |
gte | Greater than or equal to |
Outlook versions map to these numbers:
| Outlook version | Number |
|---|---|
| Outlook 2000 | 9 |
| Outlook 2002 | 10 |
| Outlook 2003 | 11 |
| Outlook 2007 | 12 |
| Outlook 2010 | 14 |
| Outlook 2013 | 15 |
| Outlook 2016+ | 16 |
So if you only want to target Outlook 2007 and later (the Word-based versions), you would write:
<!--[if gte mso 12]>
<style>
/* Styles only for Outlook 2007 and newer */
</style>
<![endif]-->
The most useful MSO properties
Most of the mso- properties exist deep in Word's rendering internals and you will never need them. But a handful of them come up in almost every well-built email. Here are the ones worth knowing.
mso-hide: all
Hides an element completely in Outlook. This is useful for elements you only want shown in modern clients — for example, dark mode overrides, animated content, or fallback text that Outlook would otherwise expose.
<div style="mso-hide: all;">
This will not appear in Outlook.
</div>
Note:
display: nonedoes not reliably hide elements in Outlook.mso-hide: allis the correct approach.
mso-line-height-rule and mso-line-height-alt
Outlook handles line-height differently from other email clients. Decimal values like line-height: 1.5 are often ignored or rounded in unexpected ways.
Use mso-line-height-rule: exactly to tell Outlook to use the exact pixel value you specify, and mso-line-height-alt to set an alternative line height only for Outlook:
<p style="line-height: 24px; mso-line-height-rule: exactly;">
This paragraph has a reliable line height in Outlook.
</p>
If you want Outlook to use a completely different line height than other clients:
<p style="line-height: 1.6; mso-line-height-alt: 24px; mso-line-height-rule: exactly;">
Other clients use 1.6, Outlook uses exactly 24px.
</p>
mso-padding-alt
Outlook ignores padding on <a> tags, which makes creating proper clickable buttons a challenge. mso-padding-alt lets you set padding specifically for Outlook — typically used alongside VML buttons so the visual result matches what other clients render.
<a href="#" style="padding: 12px 30px; mso-padding-alt: 0 20px;">
Click me
</a>
It also works on table cells when you need Outlook to respect specific inner spacing:
<td style="padding: 20px; mso-padding-alt: 10px 20px 10px 20px;">
Content
</td>
mso-font-alt
Outlook falls back to Times New Roman when it cannot render a font. mso-font-alt lets you specify a different fallback font specifically for Outlook, giving you more control than the standard font-family stack.
<p style="font-family: 'Brand Font', Arial, sans-serif; mso-font-alt: Arial;">
This text uses Arial in Outlook instead of Times New Roman.
</p>
mso-border-alt
Outlook sometimes renders unexpected borders on elements, especially table cells and images. Setting mso-border-alt: none removes them:
<img src="image.png" style="border: 0; mso-border-alt: none;" />
You can also use it to apply a specific border only in Outlook:
<td style="mso-border-alt: solid #cccccc 1px;">
Cell with a border in Outlook
</td>
mso-table-lspace and mso-table-rspace
Outlook adds phantom spacing on the left and right sides of tables. These two properties remove it and are considered standard practice in every HTML email:
<table style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
...
</table>
You will see these in virtually every email reset stylesheet.
mso-color-alt
When Outlook overrides text colors — for example, auto-coloring links — mso-color-alt lets you force a specific color:
<a href="#" style="color: #245157; mso-color-alt: #245157;">
Link with forced color in Outlook
</a>
Combining conditional comments with VML
The most advanced Outlook-specific technique combines conditional comments with VML (Vector Markup Language), an old Microsoft format that Outlook's Word renderer still understands. This is how you create rounded buttons that actually work in Outlook — as seen in the perfect button guide.
The pattern wraps a VML shape in a conditional comment so Outlook renders it, while other clients render the standard <a> tag:
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:w="urn:schemas-microsoft-com:office:word"
href="#"
style="width:160px; height:45px; v-text-anchor:middle;"
arcsize="50%"
fillcolor="#245157"
stroke="f">
<w:anchorlock/>
<center>
<![endif]-->
<a href="#" style="background-color:#245157; border-radius:100px; color:#ffffff; display:inline-block; font-family: Arial, sans-serif; font-size:16px; padding:10px 30px; text-decoration:none;">
Click me
</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
Other clients see only the <a> tag. Outlook renders the VML shape.
A practical Outlook reset
Combining the most important MSO properties into a reset block that goes in your email's <head> is good practice:
<!--[if mso]>
<style type="text/css">
table, td, p, a {
mso-line-height-rule: exactly;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
mso-border-alt: none;
}
</style>
<![endif]-->
This alone will prevent many of the most common Outlook rendering issues before you even start writing your layout.
Outlook's Word-based renderer is not going away anytime soon. Mastering conditional comments and mso- properties is what separates emails that break in Outlook from emails that don't.
Complete list of MSO properties
This is the full reference of every mso- property documented by Litmus, organized by category. Most relate to Word's internal document model and will never appear in email code — but the list is useful when you encounter an unfamiliar property in someone else's template.
Hover over any property name to see the accepted value type.
Font & Typography
| mso-ansi-font-size | mso-ansi-font-style | mso-ansi-font-weight |
| mso-ansi-language | mso-ascii-font-family | mso-ascii-theme-font |
| mso-bidi-font-family | mso-bidi-font-size | mso-bidi-font-style |
| mso-bidi-font-weight | mso-bidi-language | mso-bidi-theme-font |
| mso-default-font-family | mso-font-alt | mso-font-charset |
| mso-font-format | mso-font-kerning | mso-font-pitch |
| mso-font-signature | mso-font-width | mso-generic-font-family |
| mso-hansi-font-family | mso-hansi-theme-font |
Language-specific Fonts
These properties set fallback fonts for specific scripts and writing systems. Each accepts a font name as its value.
| mso-arabic-font-family | mso-armenian-font-family | mso-bengali-font-family |
| mso-bopomofo-font-family | mso-currency-font-family | mso-cyrillic-font-family |
| mso-devanagari-font-family | mso-eudc-font-family | mso-fareast-font-family |
| mso-fareast-language | mso-fareast-theme-font | mso-georgian-font-family |
| mso-greek-font-family | mso-gurmukhi-font-family | mso-halfwidthkana-font-family |
| mso-han-font-family | mso-hangul-font-family | mso-hebrew-font-family |
| mso-kana-font-family | mso-kannada-font-family | mso-lao-font-family |
| mso-latin-font-family | mso-latinext-font-family | mso-malayalam-font-family |
| mso-oriya-font-family | mso-symbol-font-family | mso-syriac-font-family |
| mso-tamil-font-family | mso-telugu-font-family | mso-thaana-font-family |
| mso-thai-font-family |
Line Height & Spacing
| mso-line-height-alt | mso-line-height-rule | mso-line-spacing |
| mso-char-tracking | mso-char-indent-count | mso-char-indent-size |
Padding & Margins
| mso-padding-alt | mso-margin-bottom-alt | mso-margin-left-alt |
| mso-margin-top-alt | mso-para-margin | mso-para-margin-bottom |
| mso-para-margin-left | mso-para-margin-right | mso-para-margin-top |
| mso-column-margin | mso-row-margin-left | mso-row-margin-right |
Borders
| mso-border-alt | mso-border-bottom-alt | mso-border-color-alt |
| mso-border-insideh | mso-border-insidev | mso-border-left-alt |
| mso-border-right-alt | mso-border-shadow | mso-border-style-alt |
| mso-border-top-alt | mso-border-width-alt |
Tables
| mso-table-lspace | mso-table-rspace | mso-table-anchor-horizontal |
| mso-table-anchor-vertical | mso-table-layout-alt | mso-table-left |
| mso-table-overlap | mso-table-top | mso-cellspacing |
| mso-cell-special | mso-tstyle-colband-size | mso-tstyle-rowband-size |
| mso-yfti-firstrow | mso-yfti-irow | mso-yfti-lastrow |
| mso-yfti-tbllook |
Lists
| mso-list | mso-list-id | mso-list-template-ids |
| mso-list-type | mso-level-font-family | mso-level-indent |
| mso-level-legacy | mso-level-legacy-indent | mso-level-legacy-space |
| mso-level-number-format | mso-level-number-position | mso-level-size |
| mso-level-start-at | mso-level-style-link | mso-level-tab-stop |
| mso-level-text |
Colors & Highlighting
| mso-color-alt | mso-color-index | mso-highlight |
| mso-themecolor | mso-themeshade | mso-shading |
| mso-pattern |
Element Positioning
| mso-element | mso-element-anchor-horizontal | mso-element-anchor-vertical |
| mso-element-frame-height | mso-element-frame-hspace | mso-element-frame-width |
| mso-element-left | mso-element-top | mso-element-wrap |
| mso-position-horizontal | mso-position-horizontal-relative | mso-position-vertical |
| mso-position-vertical-relative | mso-rotate | mso-linked-frame |
Width & Height
| mso-width-alt | mso-width-source | mso-height-rule |
| mso-height-source |
Visibility
| mso-hide |
Style Management
| mso-style-id | mso-style-link | mso-style-locked |
| mso-style-name | mso-style-next | mso-style-noshow |
| mso-style-parent | mso-style-priority | mso-style-qformat |
| mso-style-type | mso-style-unhide | mso-style-update |
Page & Document
| mso-background-source | mso-break-type | mso-data-placement |
| mso-default-props | mso-displayed-decimal-separator | mso-displayed-thousand-separator |
| mso-even-footer | mso-field-code | mso-footer |
| mso-footer-margin | mso-header | mso-header-margin |
| mso-number-format | mso-outline-level | mso-page-border-surround-footer |
| mso-page-border-surround-header | mso-page-orientation | mso-pagination |
| mso-paper-source | mso-protection | mso-tab-count |
| mso-title-page |
Text & Characters
| mso-char-type | mso-char-wrap | mso-gram-e |
| mso-hyphenate | mso-ignore | mso-kinsoku-overflow |
| mso-layout-grid-align | mso-no-proof | mso-spacerun |
| mso-special-character | mso-special-format | mso-spl-e |
| mso-text-animation | mso-text-raise | mso-bookmark |
Wrap & Distance
| mso-wrap-distance-bottom | mso-wrap-distance-left | mso-wrap-distance-right |
| mso-wrap-distance-top | mso-wrap-edited |
Footnotes & Endnotes
| mso-endnote-continuation-separator | mso-endnote-numbering-style | mso-endnote-separator |
| mso-footnote-continuation-separator | mso-footnote-id | mso-footnote-separator |
Source: Litmus — Outlook & Windows Mail Overview
Ready to start making Better emails? Book a demo here.
