Tips & Resources  ›  Designing and building emails

Guide to CSS support in email

Full report on all 24 clients

Designing an HTML email that renders consistently across the major email clients can be very time consuming. Support for even simple CSS varies considerably between clients, and even different versions of the same client.

We’ve put together this guide to save you the time and frustration of figuring it out for yourself. With 24 different email clients tested, we cover all the popular applications across desktop, web and mobile email.

As the number of email clients continues to grow, we’ve decided to simplify the web-based version of the guide to focus on the 10 most popular email clients on the market. For the complete report on all 24 email clients across the desktop, web and mobile email world, download the complete guide in PDF format.

Style element Outlook
2007/10 [1]		 Outlook
2000/03		 Apple
iPhone/iPad		 Windows
Live Hotmail		 Apple
Mail 4		 Yahoo!
Mail Beta		 Google Gmail Android 2.3 (Gmail) [2]
<style> in <head> Yes Yes Yes Yes Yes Yes No No
<style> in <body> Yes Yes Yes Yes Yes Yes No No
Link Element Outlook
2007/10 [1]		 Outlook
2000/03		 Apple
iPhone/iPad		 Windows
Live Hotmail		 Apple
Mail 4		 Yahoo!
Mail Beta		 Google Gmail Android 2.3 (Gmail) [2]
<link> in <head> Yes Yes Yes No Yes No No No
<link> in <body> Yes Yes Yes No Yes No No No
Selectors[3] Outlook
2007/10 [1]		 Outlook
2000/03		 Apple
iPhone/iPad		 Windows
Live Hotmail		 Apple
Mail 4		 Yahoo!
Mail Beta		 Google Gmail Android 2.3 (Gmail) [2]
* No Yes Yes No Yes No No No
E Yes Yes Yes Yes Yes Yes No No
E[foo] No No Yes No Yes No No No
E[foo="bar"] No Yes Yes No Yes No No No
E[foo~="bar"] No Yes Yes No Yes No No No
E[foo^="bar"] No Yes Yes No Yes No No No
E[foo$="bar"] No Yes Yes No Yes No No No
E[foo*="bar"] No Yes Yes No Yes No No No
E:nth-child(n) No No Yes No Yes No No No
E:nth-last-child(n) No No Yes No Yes No No No
E:nth-of-type(n) No No Yes No Yes No No No
E:nth-last-of-type(n) No No Yes No Yes No No No
E:first-child No Yes Yes No Yes No No No
E:last-child No No Yes No Yes No No No
E:first-of-type No No Yes No Yes No No No
E:last-of-type No No Yes No Yes No No No
E:empty No No Yes No Yes No No No
E:link Yes Yes Yes Yes Yes No[4] No No
E:visited Yes No Yes Yes No No[4] No No
E:active No Yes No Yes Yes Yes No No
E:hover No Yes No Yes Yes Yes No No
E:focus No No Yes No Yes No No No
E:target No No No No No No No No
E::first-line No Yes Yes No Yes Yes No No
E::first-letter No Yes Yes No Yes Yes No No
E::before No No Yes No Yes No No No
E::after No No Yes No Yes No No No
E.classname Yes Yes Yes Yes Yes Yes No[3] No
E#id Yes Yes Yes No Yes Yes No[3] No
E:not(s) No No Yes No Yes No No No
E F Yes Yes Yes Yes Yes Yes No No
E > F No No Yes No Yes Yes No No
E + F No No Yes No Yes Yes No No
E ~ F No Yes Yes No Yes No No No
Text & Fonts Outlook
2007/10 [1]		 Outlook
2000/03		 Apple
iPhone/iPad		 Windows
Live Hotmail		 Apple
Mail 4		 Yahoo!
Mail Beta		 Google Gmail Android 2.3 (Gmail) [2]
direction No Yes Yes Yes Yes Yes Yes Yes
font Yes Yes Yes Yes Yes Yes Yes Yes
font-family Yes Yes Yes Yes Yes Yes Yes Yes
font-style Yes Yes Yes Yes Yes Yes Yes Yes
font-variant Yes Yes Yes Yes Yes Yes Yes Yes
font-size Yes Yes Partial or buggy support[5] Yes Yes Yes Yes Yes
font-weight Yes Yes Yes Yes Yes Yes Yes Yes
letter-spacing Yes Yes Yes Yes Yes Yes Yes Yes
line-height Yes Yes Yes Yes Yes Yes Yes Yes
text-align Yes Yes Yes Yes Yes Yes Yes Yes
text-decoration Yes Yes Yes Yes Yes Yes Yes Yes
text-indent Yes Yes Yes Yes Yes Yes Yes Yes
text-overflow CSS3 No Yes Yes Partial or buggy support[6] Yes Partial or buggy support[6] Partial or buggy support[7] Yes
text-shadow CSS3 No No Yes Yes Yes Yes Yes Yes
text-transform Yes Yes Yes Yes Yes Yes Yes Yes
white-space Yes No Yes Yes Yes Yes Yes Yes
word-spacing No Yes Yes Yes Yes Yes Yes Yes
word-wrap CSS3 No Partial or buggy support[8] Yes Yes Yes Yes No No
vertical-align No Yes Yes Yes Yes Yes Yes Yes
Color & Background Outlook
2007/10 [1]		 Outlook
2000/03		 Apple
iPhone/iPad		 Windows
Live Hotmail		 Apple
Mail 4		 Yahoo!
Mail Beta		 Google Gmail Android 2.3 (Gmail) [2]
color Yes Yes Yes Yes Yes Yes Yes Yes
background Partial or buggy support[9] Yes Yes Partial or buggy support[9] Yes Yes Yes Partial or buggy support[9]
background-color Yes Yes Yes Yes Yes Yes Yes Yes
background-image No Yes Yes No Yes Yes Yes No
background-position No Yes Yes No Yes Yes No No
background-repeat No Yes Yes No Yes Yes No No
HSL Colors CSS3 Yes Yes Yes Yes Yes Yes Yes Yes
HSLA Colors CSS3 No No Yes No Yes No No No
Opacity CSS3 No No Yes Yes Yes No No No
RGBA Colors CSS3 No No Yes No Yes No No No
Box Model Outlook
2007/10 [1]		 Outlook
2000/03		 Apple
iPhone/iPad		 Windows
Live Hotmail		 Apple
Mail 4		 Yahoo!
Mail Beta		 Google Gmail Android 2.3 (Gmail) [2]
border Yes Yes Yes Yes Yes Yes Yes Yes
box-shadow CSS3 No No No Partial or buggy support[10] No No No No
height No Yes Yes Yes Yes Yes Yes Yes
margin Partial or buggy support[20] Yes Yes Partial or buggy support[11] Yes Yes Yes Yes
padding Partial or buggy support[12] Yes Yes Yes Yes Yes Yes Yes
width Partial or buggy support[19] Yes Yes Yes Yes Yes Yes Yes
max-width No No Yes No Yes Partial or buggy support[17] Partial or buggy support[17] Yes
min-width No No Yes No Yes Partial or buggy support[18] Partial or buggy support[18] Yes
Positioning & Display Outlook
2007/10 [1]		 Outlook
2000/03		 Apple
iPhone/iPad		 Windows
Live Hotmail		 Apple
Mail 4		 Yahoo!
Mail Beta		 Google Gmail Android 2.3 (Gmail) [2]
bottom No Yes Yes Yes Yes No No No
clear No Yes Yes Yes Yes Yes Yes Yes
clip No Yes Yes No Yes No No No
cursor No Yes Yes Yes Yes Yes No No
display No Yes Yes Yes Yes Yes No No
float No Yes Yes Yes Yes Yes Yes Yes
left No Yes Yes No Yes No No No
opacity No No Yes Yes Yes No No No
outline CSS3 No No Yes Partial or buggy support[13] Yes Partial or buggy support[13] Partial or buggy support[13] No
overflow No Yes Yes Partial or buggy support[14] Yes Partial or buggy support[14] Partial or buggy support[14] Partial or buggy support[15]
position No Yes Yes Yes Yes No No No
resize CSS3 No Yes Yes Partial or buggy support16] Yes Partial or buggy support[16] No No
right No Yes Yes Yes Yes No No No
top No Yes Yes Yes Yes No No No
visibility No Yes Yes Yes Yes Yes No No
z-index Yes Yes Yes No Yes No No No
Lists Outlook
2007/10 [1]		 Outlook
2000/03		 Apple
iPhone/iPad/iPad		 Windows
Live Hotmail		 Apple
Mail 4		 Yahoo!
Mail Beta		 Google Gmail Android 2.3 (Gmail) [2]
list-style-image No Yes Yes No Yes Yes No No
list-style-position No Yes Yes No Yes Yes No No
list-style-type No Yes Yes Yes Yes Yes Yes No
Tables Outlook
2007/10 [1]		 Outlook
2000/03		 Apple
iPhone/iPad		 Windows
Live Hotmail		 Apple
Mail 4		 Yahoo!
Mail Beta		 Google Gmail Android 2.3 (Gmail) [2]
border-collapse Yes Yes Yes Yes Yes Yes Yes Yes
border-spacing No No Yes Yes Yes Yes Yes Yes
caption-side No No No Yes No Yes Yes Yes
empty-cells No No Yes Yes Yes Yes Yes Yes
table-layout Yes Yes Yes Yes Yes Yes Yes Yes
Total Market Share 27.62% 16.01% 12.14% 11.13% 9.54% 7.02% 1.7%

Notes

  • [1] For full CSS rendering capabilities, see MSN Developer docs
  • [2] Tested on a Google Nexus S
  • [3] Works in some instances if CSS is inlined before or during campaign import
  • [4] CSS hack required for link colors - see fix for Yahoo! Mail Beta
  • [5] By default, minimum font size is 13px
  • [6] text-overflow: ellipsis; does not work
  • [7] text-overflow: ellipsis; does not work in Firefox
  • [8] word-wrap: normal; not supported
  • [9] Background images not supported
  • [10] No in Safari, Yes in Firefox
  • [11] Hotmail doesn’t support "margin" or "margin-top"
  • [12] Padding for p and div tags is not supported
  • [13] Inner and outer border are collapsed
  • [14] overflow: hidden; does not work
  • [15] overflow: scroll; does not work
  • [16] IE: Yes. Otherwise, inline text field with scrollbar displays, but no resize tab
  • [17] IE7: Partial support. Good in IE9, Safari, Firefox, Chrome
  • [18] IE7: No support. Good in IE9, Safari, Firefox, Chrome
  • [19] Width property works on tables and table cells, but not when applied to div, p and inline elements (eg. span). By default, inline elements are set to 100% width in Outlook ‘07. For full CSS rendering capabilities, see MSN Developer docs.
  • [20] Limited support for margin in Outlook 2007/2010. Margins around images are not supported.

Version History

30 April 2012

Updated to reflect limited support for margin in Outlook 2007/2010. Margins around images are ignored.

1 February 2012

background-image is now supported in Gmail.

5 September 2011

Added email client results for max-width and min-width - see blog post for details.

21 June 2011

Updated guide to CSS in email released. See blog post for details. For complete results for all 24 email clients, download the guide to CSS support in email clients as an Excel spreadsheet.

10 December 2010

Updated to reflect margin support in Windows Live Hotmail. Also introducing improved support for @media queries and shorthand CSS.

Discuss this on our blog.

22 April 2010

Updated the guide with the results of our CSS3 email client tests. 21 new properties were added, with varying levels of support observed across the popular email clients. Notably, Webkit clients were big winners, including Apple Mail, iPhone Mail and soon, the iPad. At this stage, CSS3 is recommended for decorative purposes in email (such as adding text-shadow), due to poor support for layout and box-model properties.

Discuss this on our blog.

27 August 2009

Added test results for the just launched MySpace Mail.

Discuss this on our blog.

6 August 2009

A complete rewrite of the guide that included 7 new mobile email clients and a focus on the most popular email clients. The web-based version of the guide now features the 10 most popular email clients, while the PDF guide includes all 23 email clients tested.

Discuss this on our blog.

26 August 2008

Replaced .Mac results with MobileMe.

Discuss this on our blog.

11 June 2008

We increased the number of clients we tested, 21 in total now. Gmail and Outlook 2007 continue to be our primary focus since CSS support continues to be limited.

Positive signs from Microsoft though, Entourage 2008 was released with significantly better CSS support.

Discuss this on the blog

19 April 2007

Outlook 2007 was released with less CSS support than Outlook 2003. A major step back for HTML email design.

New Yahoo! mail was released with better support for CSS, a positive sign to say the least! Windows Live Mail replaced Hotmail and nixed some CSS support in the process.

Read the report

30 March 2006

This was our original test. We added Windows Live Mail for the first time and ran through tests on Outlook 2003, AOL 9, Lotus Notes and Eudora.

Read the report