Outlook Classic email CSS: what breaks, and what to write instead

51 of 300 features work in Outlook Classic · 26 partial · 222 not supported · 1 untested. Of the 222 not supported, 56 work in at least 14 of the other 20 clients.

Works 51 · Partial 26 · Not supported 222 · Untested 1 · of 300

Microsoft Word · desktop · prefers-color-scheme: not supported · Being replaced by Outlook (New) · What changes for HTML email

Check your email, free

No signup · Five clients free, Outlook Classic included · All 21 with an account

The checker needs a computer screen.

See what breaks ↓

Outlook Classic is one of the five clients the checker runs with no account.

A free account opens all 21 clients and keeps your checks for 7 days. Create a free account →

@emailens/engine 0.18.22 · data last changed 10 Nov 2026

Where Outlook Classic is the outlier

56 features work in at least 14 of the other 20 clients and are not supported here.

So an email that looks right in most clients can reach your reader in Outlook Classic without them.

All 56

Outlook Classic on real installs

The Emailens probe for each feature, captured on Outlook Classic's own installs, next to the Emailens live preview of Outlook Classic.

display:flex in a real Outlook 2019 (Windows)

The Emailens probe for display:flex on a real Outlook 2019 (Windows) — Outlook Classic

The Emailens probe for display:flex on a real Outlook 2016 (Windows) — Outlook Classic

display:grid in a real Outlook 2019 (Windows)

The Emailens probe for display:grid on a real Outlook 2019 (Windows) — Outlook Classic

The Emailens probe for display:grid on a real Outlook 2016 (Windows) — Outlook Classic

border-spacing in a real Outlook 2019 (Windows)

The Emailens probe for border-spacing on a real Outlook 2019 (Windows) — Outlook Classic

The Emailens probe for border-spacing on a real Outlook 2016 (Windows) — Outlook Classic

What to write instead

19 features Outlook Classic does not fully support have a written fix. See them in the table ↓

display:flex

The fix for Outlook Classic

Use table layout as fallback for flexbox in Outlook

after

13 lines

<!--[if mso]>
<table role="presentation" width="100%" cellpadding="0"
  cellspacing="0" border="0"><tr>
  <td width="50%" valign="top">Column 1</td>
  <td width="50%" valign="top">Column 2</td>
</tr></table>
<![endif]-->
<!--[if !mso]><! -->
<div style="display: flex; gap: 16px;">
  <div style="flex: 1;">Column 1</div>
  <div style="flex: 1;">Column 2</div>
</div>
<!-- <![endif]-->

Show the original

before

4 lines

<div style="display: flex; gap: 16px;">
  <div style="flex: 1;">Column 1</div>
  <div style="flex: 1;">Column 2</div>
</div>

Test this fix in Outlook Classic, free

Opens the checker with this fix loaded. Uses 1 of your 3 free checks today.

The checker needs a computer screen.

display:grid

The fix for Outlook Classic

Replace CSS Grid with table layout for email compatibility

after

11 lines

<table role="presentation" width="100%" cellpadding="0"
  cellspacing="0" border="0">
  <tr>
    <td width="50%" style="padding: 8px;" valign="top">
      Item 1
    </td>
    <td width="50%" style="padding: 8px;" valign="top">
      Item 2
    </td>
  </tr>
</table>

Show the original

before

5 lines

<div style="display: grid;
            grid-template-columns: 1fr 1fr; gap: 16px;">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Test this fix in Outlook Classic, free

Opens the checker with this fix loaded. Uses 1 of your 3 free checks today.

The checker needs a computer screen.

border-spacing

The fix for Outlook Classic

Use the cellspacing HTML attribute instead of border-spacing CSS

after

3 lines

<table cellspacing="8" style="border-collapse: separate;">
  <tr><td>Cell</td></tr>
</table>

Show the original

before

3 lines

<table style="border-spacing: 8px; border-collapse: separate;">
  <tr><td>Cell</td></tr>
</table>

Test this fix in Outlook Classic, free

Opens the checker with this fix loaded. Uses 1 of your 3 free checks today.

The checker needs a computer screen.

Paste your email and see what Outlook Classic does to it.

Check your email, free

No signup · Five clients free, Outlook Classic included · All 21 with an account

The checker needs a computer screen.

Dark mode in Outlook Classic

Not supported @media prefers-color-scheme is not supported in Outlook Classic.

Works in 9 of 21.
Not supported color-scheme is not supported in Outlook Classic.

Works in 4 of 21.
Not supported meta-color-scheme is not supported in Outlook Classic.

Works in 2 of 21.

Live preview: Outlook Classic applies full color inversion in dark mode. Colors may shift unexpectedly.

How to target Outlook Classic

Selectors that single out Outlook Classic, from the community list the engine ships (howtotarget.email). Copy one and replace .your-class-name.

css

48 lines

<!--[if mso | ie]>
Target Outlook Windows
<![endif]-->

<!--[if true]>
Target Outlook Windows
<![endif]-->

<!--[if false]>
Hide from all Outlook Windows
<![endif]-->

<!--[if !mso]><!-->
Hide from all Outlook Windows 
<!--<![endif]-->
This will also hide content from t-online.de - see below for fix.

<!--[if !mso]><! -->
Only Hide from Outlook Windows
<!-- <![endif]-->
** Note the space after the ! above ^ **
If no space is used the comment will hide the content from t-online.de


<span style="mso-element:field-begin;"></span>
 Content to hide from Outlook 
<span style="mso-element:field-end;"></span>

<!--[if mso 12 | mso 14 | mso 15 ]>
Target Outlook 2007/10/13
<![endif]-->

<!--[if mso 12]>
Target Outlook 2007
<![endif]-->

<!--[if mso 14]>
Target Outlook 2010
<![endif]-->

<!--[if mso 15]>
Target Outlook 2013
<![endif]-->

<!--[if mso 16]>
Outlook 2016 and up
Also Windows mail
<![endif]-->

Using the above comment and the different elements we can target specific Outlooks.

No longer works (1)

css

5 lines

@media (min-resolution: 1dpi) {
  body[data-outlook-cycle] .your-class-name {
    display: block!important;
  }
}

Build one for several clients →

Before you send to Outlook Classic

Always test in real Outlook 2016/2019, browser-based previews do not capture every Word quirk.
Check at 100% and 125% Windows display scaling to catch DPI-induced layout breaks.
Verify that VML fallbacks render correctly when Microsoft's image-blocking is on; some VML elements depend on referenced images.

The live preview follows Word's rendering rules, but some quirks only show in the real app.

Every account includes one free real-device check in classic Outlook, Outlook for Mac and Apple Mail, after you verify your email and run one preview, while this month's free capacity lasts. How real-device checks work →

Your next question

Outlook 365 · Outlook (New)

Every feature in Outlook Classic

What breaks here (248) Everything (300) Untested (1)

HTML Elements · 31 of 48 not supported or partial here

<abbr> Buggy. Not supported Works in 14 of 21
<acronym> Buggy. Not supported Works in 13 of 21
<address> Works Works in 20 of 21
<audio> Not supported Works in 4 of 21
<base> Not supported Works in 4 of 21
<bdi> Not supported Works in 6 of 21
<blockquote> Works Works in 19 of 21
<body> Works Works in 5 of 21
<button type="reset"> Not supported Works in 10 of 21
<button type="submit"> Not supported Works in 11 of 21
<code> Works Works in 20 of 21
<del> Works Works in 20 of 21
<dfn> Partial. Partial Works in 17 of 21
<dialog> Not supported Works in 5 of 21
<div> Works Works in 20 of 21
<form> fix Not supported Works in 10 of 21
<h1> Works Works in 20 of 21
<hr> Works Works in 18 of 21
<img> Works Works in 19 of 21
<input type="checkbox"> Not supported Works in 16 of 21
<input type="hidden"> Not supported Works in 16 of 21
<input type="radio"> Not supported Works in 16 of 21
<input type="reset"> Not supported Works in 15 of 21
<input type="submit"> Not supported Works in 12 of 21
<input type="text"> Not supported Works in 13 of 21
<link> Works Works in 3 of 21
<marquee> Not supported Works in 8 of 21
<meter> Not supported Works in 11 of 21
<object> Not supported Works in 1 of 21
<p> Works Works in 20 of 21
<picture> Not supported Works in 4 of 21
<pre> Works Works in 20 of 21
<progress> Not supported Works in 6 of 21
<rp> Not supported Works in 15 of 21
<rt> Not supported Works in 15 of 21
<ruby> Not supported Works in 15 of 21
<select> Not supported Works in 14 of 21
<small> Works Works in 20 of 21
<span> Works Works in 20 of 21
<strike> Works Works in 17 of 21
<strong> Works Works in 20 of 21
<style> Buggy. Partial Works in 16 of 21
<svg> fix Not supported Works in 5 of 21
<table> Works Works in 20 of 21
<textarea> Not supported Works in 13 of 21
<ul> Partial. Partial Works in 7 of 21
<video> fix Not supported Works in 3 of 21
<wbr> Not supported Works in 16 of 21

HTML Attributes · 17 of 22 not supported or partial here

[align] Works Works in 17 of 21
[aria-describedby] Not supported Works in 9 of 21
[aria-hidden] Not supported Works in 13 of 21
[aria-label] Not supported Works in 13 of 21
[aria-labelledby] Buggy. Not supported Works in 7 of 21
[aria-live] Not supported Works in 8 of 21
[background] Not supported Works in 16 of 21
[cellpadding] Works Works in 18 of 21
[cellspacing] Works Works in 18 of 21
[command] Not supported Works in 3 of 21
[dir] Buggy on anchor <a> tags. Partial Works in 19 of 21
[height] Buggy. Partial Works in 18 of 21
[hidden] Not supported Works in 5 of 21
[lang] Works Works in 15 of 21
[loading] Not supported Works in 4 of 21
[popover] Not supported Works in 3 of 21
[required] Not supported Works in 7 of 21
[role] Not supported Works in 14 of 21
[srcset] Not supported Works in 4 of 21
[target] The attribute is supported but links always open in a new window anyway. Partial Works in 0 of 21
[valign] Works Works in 20 of 21
[width] Buggy. Partial Works in 18 of 21

HTML & Email Structure · 5 of 8 not supported or partial here

amp4email Not supported Works in 6 of 21
anchor-links Works Works in 12 of 21
doctype Not supported. Not supported Works in 13 of 21
html-comments Works Works in 18 of 21
html5-semantics Not supported Works in 6 of 21
image-maps Not supported Works in 15 of 21
mailto-links Works Works in 17 of 21
meta-color-scheme Not supported Works in 2 of 21

CSS At-Rules · 9 of 10 not supported or partial here

@font-face Not supported Works in 6 of 21
@import Works Works in 4 of 21
@keyframes Not supported Works in 7 of 21
@media Not supported Works in 5 of 21
@media device-pixel-ratio Not supported Works in 10 of 21
@media hover Not supported Works in 9 of 21
@media orientation Not supported Works in 11 of 21
@media prefers-color-scheme Not supported Works in 9 of 21
@media prefers-reduced-motion Not supported Works in 9 of 21
@supports Not supported Works in 9 of 21

Pseudo-Elements · 6 of 6 not supported or partial here

::after Not supported Works in 6 of 21
::before Not supported Works in 6 of 21
::first-letter Not supported Works in 10 of 21
::first-line Not supported Works in 10 of 21
::marker Not supported. Not supported Works in 10 of 21
::placeholder Not supported Works in 9 of 21

Pseudo-Classes & Selectors · 28 of 34 not supported or partial here

:adjacent-sibling Not supported Works in 16 of 21
:attribute-selector Not supported Works in 6 of 21
:chaining Buggy. Not supported Works in 14 of 21
:checked Not supported Works in 9 of 21
:child-combinator Not supported Works in 16 of 21
:class-selector Works Works in 17 of 21
:descendant-combinator Works Works in 17 of 21
:first-child Not supported Works in 12 of 21
:first-of-type Not supported Works in 12 of 21
:focus Not supported Works in 10 of 21
:focus-visible Not supported Works in 6 of 21
:focus-within Not supported Works in 6 of 21
:general-sibling Not supported Works in 16 of 21
:grouping Works Works in 17 of 21
:has Not supported Works in 5 of 21
:hover Not supported Works in 12 of 21
:id-selector Works Works in 17 of 21
:lang Not supported Works in 6 of 21
:last-child Not supported Works in 12 of 21
:last-of-type Not supported Works in 12 of 21
:link Works Works in 13 of 21
:not Not supported Works in 6 of 21
:nth-child Not supported Works in 6 of 21
:nth-last-child Not supported Works in 6 of 21
:nth-of-type Not supported Works in 6 of 21
:only-child Not supported Works in 12 of 21
:only-of-type Not supported Works in 12 of 21
:target Not supported Works in 7 of 21
:type-selector Works Works in 17 of 21
:universal-selector Not supported Works in 16 of 21
:visited Not supported Works in 8 of 21
pseudo-class-active Not supported Works in 8 of 21
pseudo-class-default Not supported Works in 10 of 21
pseudo-class-nth-last-of-type Not supported Works in 6 of 21

CSS Functions · 8 of 8 not supported or partial here

calc Not supported Works in 8 of 21
clamp Not supported Works in 6 of 21
conic-gradient Not supported Works in 6 of 21
fit-content Not supported Works in 11 of 21
linear-gradient Gradients can be created in VML using type="gradient" on a <v:fill>. Not supported Works in 9 of 21
max Not supported Works in 6 of 21
min Not supported Works in 6 of 21
radial-gradient Gradients can be created in VML using type="gradientRadial" on a <v:fill>. Not supported Works in 10 of 21

CSS Properties · 144 of 164 not supported or partial here

!important Partial. Partial Works in 11 of 21
accent-color Not supported Works in 5 of 21
align-items Not supported Works in 13 of 21
animation fix Not supported Works in 5 of 21
aspect-ratio Not supported Works in 5 of 21
backdrop-filter Not supported Works in 6 of 21
background Partial. Partial Works in 16 of 21
background-blend-mode Not supported Works in 13 of 21
background-clip Not supported Works in 14 of 21
background-color Works Works in 21 of 21
background-image Background images can be used in VML. Not supported Works in 16 of 21
background-origin Background images origin can be used in VML with the origin attribute. Not supported Works in 14 of 21
background-position Background images position can be used in VML with the position attribute. Not supported Works in 20 of 21
background-repeat Background images repetition can be used in VML with the type="tile" or type="frame" attribute. Not supported Works in 20 of 21
background-size Background images size can be used in VML with the size attribute. Not supported Works in 17 of 21
bimi Not supported Works in 9 of 21
block-size Not supported Works in 7 of 21
border Partial. Partial Works in 20 of 21
border-collapse Works Works in 19 of 21
border-image Not supported Works in 7 of 21
border-inline Not supported Works in 3 of 21
border-inline-individual Not supported Works in 3 of 21
border-inline-longhand Not supported Works in 4 of 21
border-radius fix Round corners can be used in VML with the RoundRect element. Not supported Works in 16 of 21
border-radius-logical Not supported Works in 3 of 21
border-spacing fix Not supported Works in 17 of 21
bottom Not supported Works in 11 of 21
box-shadow Not supported Works in 14 of 21
box-sizing Not supported Works in 16 of 21
caption-side Not supported Works in 20 of 21
clear Not supported Works in 9 of 21
clip-path Not supported Works in 8 of 21
color Works Works in 21 of 21
color-scheme Not supported Works in 4 of 21
column-count Not supported Works in 16 of 21
columns Not supported Works in 16 of 21
css-comments Works Works in 14 of 21
cursor Untested Works in 2 of 21
custom-properties Not supported Works in 6 of 21
direction Works Works in 21 of 21
display Buggy. Partial Works in 13 of 21
display:flex fix Not supported Works in 18 of 21
display:grid fix Not supported Works in 18 of 21
display:none Partial. Partial Works in 20 of 21
empty-cells Not supported Works in 14 of 21
filter Not supported Works in 7 of 21
flex Not supported Works in 13 of 21
flex-basis Not supported Works in 13 of 21
flex-direction Not supported Works in 12 of 21
flex-wrap Not supported Works in 13 of 21
float Not supported. Not supported Works in 14 of 21
font Works Works in 20 of 21
font-family Works Works in 21 of 21
font-kerning Not supported Works in 13 of 21
font-size Partial support. Partial Works in 13 of 21
font-size-adjust Not supported Works in 10 of 21
font-stretch Not supported Works in 10 of 21
font-weight Partial support. Partial Works in 16 of 21
gap fix Not supported Works in 7 of 21
grid-template-columns Not supported Works in 7 of 21
height Partial. Partial Works in 16 of 21
hyphenate-character Not supported Works in 4 of 21
hyphenate-limit-chars Not supported Works in 1 of 21
hyphens Not supported Works in 4 of 21
inert Not supported Works in 3 of 21
inline-size Not supported Works in 4 of 21
inset Not supported Works in 3 of 21
justify-content Not supported Works in 13 of 21
left Not supported Works in 11 of 21
letter-spacing Partial. Partial Works in 20 of 21
light-dark Not supported Works in 3 of 21
line-height Buggy. Partial Works in 20 of 21
list-style Only list-style-type values are supported. Partial Works in 11 of 21
list-style-image Not supported, but the proprietary mso-bullet-image property can be used instead on <li>. Not supported Works in 6 of 21
list-style-position Not supported, but the proprietary mso-text-indent-alt property can be used instead. Not supported Works in 19 of 21
list-style-type Works Works in 21 of 21
margin Partial. Partial Works in 8 of 21
margin-block-start-end Not supported Works in 4 of 21
margin-inline-block Not supported Works in 6 of 21
margin-inline-start-end Not supported Works in 4 of 21
mask-image Not supported Works in 4 of 21
max-block-size Not supported Works in 5 of 21
max-height fix Not supported Works in 20 of 21
max-inline-size Not supported Works in 4 of 21
max-width fix Partial. Partial Works in 20 of 21
min-block-size Not supported Works in 4 of 21
min-height Not supported Works in 19 of 21
min-inline-size Not supported Works in 5 of 21
min-width Not supported Works in 20 of 21
mix-blend-mode Not supported Works in 13 of 21
modern-color Not supported Works in 4 of 21
nesting Not supported Works in 2 of 21
object-fit Not supported Works in 14 of 21
object-position Not supported Works in 14 of 21
opacity fix Not supported Works in 19 of 21
orphans Not supported Works in 10 of 21
outline Not supported Works in 20 of 21
outline-offset Not supported Works in 7 of 21
overflow Not supported Works in 4 of 21
overflow-wrap fix Does not honor any wrapping, including word-wrap, overflow-wrap, and word-break. Not supported Works in 2 of 21
padding fix Partial. Partial Works in 20 of 21
padding-block-start-end Not supported Works in 4 of 21
padding-inline-block Not supported Works in 3 of 21
padding-inline-start-end Not supported Works in 4 of 21
position fix Not supported Works in 2 of 21
resize Not supported Works in 1 of 21
rgb Whitespace syntax is not supported (rgb(0 128 0 / 1)). Partial Works in 12 of 21
rgba Not supported Works in 12 of 21
right Not supported Works in 11 of 21
scroll-snap Not supported Works in 6 of 21
shape-margin Not supported Works in 6 of 21
shape-outside Not supported Works in 6 of 21
system-ui Not supported Works in 12 of 21
tab-size Not supported Works in 8 of 21
table-layout Not supported Works in 16 of 21
text-align Partial. Partial Works in 13 of 21
text-align-last Not supported Works in 7 of 21
text-decoration Partial. Partial Works in 14 of 21
text-decoration-color Not supported, but the proprietary text-underline-color property can be used instead. Not supported Works in 17 of 21
text-decoration-line Not supported Works in 16 of 21
text-decoration-skip-ink Not supported Works in 7 of 21
text-decoration-style Not supported Works in 16 of 21
text-decoration-thickness Not supported, but the proprietary text-underline-style property can be used instead with the keyword value thick. Not supported Works in 7 of 21
text-emphasis Not supported Works in 9 of 21
text-emphasis-position Not supported Works in 4 of 21
text-indent Works Works in 13 of 21
text-justify Buggy. Not supported Works in 0 of 21
text-orientation Not supported Works in 13 of 21
text-overflow Not supported Works in 13 of 21
text-shadow fix Not supported Works in 12 of 21
text-transform Partial. Partial Works in 20 of 21
text-underline-offset Not supported Works in 7 of 21
text-underline-position Not supported Works in 8 of 21
text-wrap Not supported Works in 4 of 21
top Not supported Works in 11 of 21
transform fix Not supported Works in 7 of 21
transition Not supported Works in 4 of 21
unit-ch Not supported Works in 15 of 21
unit-cm Works Works in 20 of 21
unit-em Works Works in 20 of 21
unit-ex Works Works in 20 of 21
unit-in Works Works in 20 of 21
unit-initial Not supported Works in 12 of 21
unit-mm Works Works in 20 of 21
unit-pc Works Works in 20 of 21
unit-percent Works Works in 20 of 21
unit-pt Works Works in 20 of 21
unit-px Works Works in 20 of 21
unit-rem Not supported Works in 15 of 21
unit-vh Not supported Works in 17 of 21
unit-vmax Not supported Works in 15 of 21
unit-vmin Not supported Works in 15 of 21
unit-vw Not supported Works in 18 of 21
user-select Not supported Works in 3 of 21
vertical-align Works Works in 21 of 21
visibility fix Not supported Works in 13 of 21
white-space Not supported Works in 15 of 21
white-space-collapse Not supported Works in 4 of 21
widows Not supported Works in 10 of 21
width Partial. Partial Works in 20 of 21
word-break fix Not supported Works in 4 of 21
word-spacing Not supported Works in 14 of 21
writing-mode Not supported Works in 13 of 21
z-index Not supported Works in 17 of 21

How Outlook Classic renders email

Outlook Classic (2007-2021) uses Microsoft Word's rendering engine instead of a browser engine. Flexbox, grid, border-radius, CSS animations, background images and dozens of other properties are not supported, and a property Word does not support is removed without a warning. Microsoft is replacing it with New Outlook, which renders with a web engine.

display: flex / grid: Completely ignored. Word has no concept of CSS layout modes. Use nested <table> elements for all layout.
border-radius: border-radius is not supported in Outlook Classic; rounded corners render square. Use VML (Vector Markup Language) inside conditional comments for rounded buttons.
background-image (CSS): CSS background images are stripped. Use <v:rect> VML inside <!--[if mso]> conditionals for background images.
max-width: Works only on <table> elements. On a <div> it is ignored, so a centered 600px layout needs a table, or an MSO conditional table around it.
margin: auto: Unreliable for centering. Use align="center" on the parent <table> instead.

Word's rendering engine treats unknown CSS properties as a silent no-op. There are no errors, no warnings, your gradient hero simply renders as a solid background-color, your rounded button as a sharp rectangle.
DPI scaling is 96 by default but is multiplied at the OS level by user accessibility settings. A 600px-wide email can render at 750 effective pixels on a 125% scaling configuration, breaking pixel-perfect designs.
Conditional comments () are the most reliable mechanism for Outlook-specific overrides, since they target only the Word renderer without affecting modern clients.
VML (Vector Markup Language) can draw rounded buttons, gradient backgrounds, and even simple SVG-like shapes inside Outlook. The syntax is verbose but well-documented in the email-development community.

Where Outlook Classic is the outlier

Outlook Classic on real installs

display:flex in a real Outlook 2019 (Windows)

display:grid in a real Outlook 2019 (Windows)

border-spacing in a real Outlook 2019 (Windows)

What to write instead

The fix for Outlook Classic

The fix for Outlook Classic

The fix for Outlook Classic

Dark mode in Outlook Classic

How to target Outlook Classic

Before you send to Outlook Classic

Your next question

Every feature in Outlook Classic

HTML Elements · 31 of 48 not supported or partial here

HTML Attributes · 17 of 22 not supported or partial here

HTML & Email Structure · 5 of 8 not supported or partial here

CSS At-Rules · 9 of 10 not supported or partial here

Pseudo-Elements · 6 of 6 not supported or partial here

Pseudo-Classes & Selectors · 28 of 34 not supported or partial here

CSS Functions · 8 of 8 not supported or partial here

CSS Properties · 144 of 164 not supported or partial here

How Outlook Classic renders email

Guides for Outlook Classic