Skip to main content

MSO attributes in Outlook emails

· 17 min read
Nicki Pabst
Nicki Pabst
CEO

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:

OperatorMeaning
msoAny version of Outlook
ltLess than a specific version
gtGreater than a specific version
lteLess than or equal to
gteGreater than or equal to

Outlook versions map to these numbers:

Outlook versionNumber
Outlook 20009
Outlook 200210
Outlook 200311
Outlook 200712
Outlook 201014
Outlook 201315
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: none does not reliably hide elements in Outlook. mso-hide: all is 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-sizemso-ansi-font-stylemso-ansi-font-weight
mso-ansi-languagemso-ascii-font-familymso-ascii-theme-font
mso-bidi-font-familymso-bidi-font-sizemso-bidi-font-style
mso-bidi-font-weightmso-bidi-languagemso-bidi-theme-font
mso-default-font-familymso-font-altmso-font-charset
mso-font-formatmso-font-kerningmso-font-pitch
mso-font-signaturemso-font-widthmso-generic-font-family
mso-hansi-font-familymso-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-familymso-armenian-font-familymso-bengali-font-family
mso-bopomofo-font-familymso-currency-font-familymso-cyrillic-font-family
mso-devanagari-font-familymso-eudc-font-familymso-fareast-font-family
mso-fareast-languagemso-fareast-theme-fontmso-georgian-font-family
mso-greek-font-familymso-gurmukhi-font-familymso-halfwidthkana-font-family
mso-han-font-familymso-hangul-font-familymso-hebrew-font-family
mso-kana-font-familymso-kannada-font-familymso-lao-font-family
mso-latin-font-familymso-latinext-font-familymso-malayalam-font-family
mso-oriya-font-familymso-symbol-font-familymso-syriac-font-family
mso-tamil-font-familymso-telugu-font-familymso-thaana-font-family
mso-thai-font-family

Line Height & Spacing​

mso-line-height-altmso-line-height-rulemso-line-spacing
mso-char-trackingmso-char-indent-countmso-char-indent-size

Padding & Margins​

mso-padding-altmso-margin-bottom-altmso-margin-left-alt
mso-margin-top-altmso-para-marginmso-para-margin-bottom
mso-para-margin-leftmso-para-margin-rightmso-para-margin-top
mso-column-marginmso-row-margin-leftmso-row-margin-right

Borders​

mso-border-altmso-border-bottom-altmso-border-color-alt
mso-border-insidehmso-border-insidevmso-border-left-alt
mso-border-right-altmso-border-shadowmso-border-style-alt
mso-border-top-altmso-border-width-alt

Tables​

mso-table-lspacemso-table-rspacemso-table-anchor-horizontal
mso-table-anchor-verticalmso-table-layout-altmso-table-left
mso-table-overlapmso-table-topmso-cellspacing
mso-cell-specialmso-tstyle-colband-sizemso-tstyle-rowband-size
mso-yfti-firstrowmso-yfti-irowmso-yfti-lastrow
mso-yfti-tbllook

Lists​

mso-listmso-list-idmso-list-template-ids
mso-list-typemso-level-font-familymso-level-indent
mso-level-legacymso-level-legacy-indentmso-level-legacy-space
mso-level-number-formatmso-level-number-positionmso-level-size
mso-level-start-atmso-level-style-linkmso-level-tab-stop
mso-level-text

Colors & Highlighting​

mso-color-altmso-color-indexmso-highlight
mso-themecolormso-themeshademso-shading
mso-pattern

Element Positioning​

mso-elementmso-element-anchor-horizontalmso-element-anchor-vertical
mso-element-frame-heightmso-element-frame-hspacemso-element-frame-width
mso-element-leftmso-element-topmso-element-wrap
mso-position-horizontalmso-position-horizontal-relativemso-position-vertical
mso-position-vertical-relativemso-rotatemso-linked-frame

Width & Height​

mso-width-altmso-width-sourcemso-height-rule
mso-height-source

Visibility​

mso-hide

Style Management​

mso-style-idmso-style-linkmso-style-locked
mso-style-namemso-style-nextmso-style-noshow
mso-style-parentmso-style-prioritymso-style-qformat
mso-style-typemso-style-unhidemso-style-update

Page & Document​

mso-background-sourcemso-break-typemso-data-placement
mso-default-propsmso-displayed-decimal-separatormso-displayed-thousand-separator
mso-even-footermso-field-codemso-footer
mso-footer-marginmso-headermso-header-margin
mso-number-formatmso-outline-levelmso-page-border-surround-footer
mso-page-border-surround-headermso-page-orientationmso-pagination
mso-paper-sourcemso-protectionmso-tab-count
mso-title-page

Text & Characters​

mso-char-typemso-char-wrapmso-gram-e
mso-hyphenatemso-ignoremso-kinsoku-overflow
mso-layout-grid-alignmso-no-proofmso-spacerun
mso-special-charactermso-special-formatmso-spl-e
mso-text-animationmso-text-raisemso-bookmark

Wrap & Distance​

mso-wrap-distance-bottommso-wrap-distance-leftmso-wrap-distance-right
mso-wrap-distance-topmso-wrap-edited

Footnotes & Endnotes​

mso-endnote-continuation-separatormso-endnote-numbering-stylemso-endnote-separator
mso-footnote-continuation-separatormso-footnote-idmso-footnote-separator

Source: Litmus — Outlook & Windows Mail Overview

Ready to start making Better emails? Book a demo here.