Guide to CSS support in email
Full report on all 24 clients
Download the complete guide
(PDF - 90 KB)
Download the complete guide
(Excel - 61 KB)
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> | ||||||||
| <style> in <body> | ||||||||
| 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> | ||||||||
| <link> in <body> | ||||||||
| 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] |
| * | ||||||||
| E | ||||||||
| E[foo] | ||||||||
| E[foo="bar"] | ||||||||
| E[foo~="bar"] | ||||||||
| E[foo^="bar"] | ||||||||
| E[foo$="bar"] | ||||||||
| E[foo*="bar"] | ||||||||
| E:nth-child(n) | ||||||||
| E:nth-last-child(n) | ||||||||
| E:nth-of-type(n) | ||||||||
| E:nth-last-of-type(n) | ||||||||
| E:first-child | ||||||||
| E:last-child | ||||||||
| E:first-of-type | ||||||||
| E:last-of-type | ||||||||
| E:empty | ||||||||
| E:link | ||||||||
| E:visited | ||||||||
| E:active | ||||||||
| E:hover | ||||||||
| E:focus | ||||||||
| E:target | ||||||||
| E::first-line | ||||||||
| E::first-letter | ||||||||
| E::before | ||||||||
| E::after | ||||||||
| E.classname | ||||||||
| E#id | ||||||||
| E:not(s) | ||||||||
| E F | ||||||||
| E > F | ||||||||
| E + F | ||||||||
| E ~ F | ||||||||
| 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 | ||||||||
| font | ||||||||
| font-family | ||||||||
| font-style | ||||||||
| font-variant | ||||||||
| font-size | [5] |
|||||||
| font-weight | ||||||||
| letter-spacing | ||||||||
| line-height | ||||||||
| text-align | ||||||||
| text-decoration | ||||||||
| text-indent | ||||||||
| text-overflow CSS3 | [6] |
[6] |
[7] |
|||||
| text-shadow CSS3 | ||||||||
| text-transform | ||||||||
| white-space | ||||||||
| word-spacing | ||||||||
| word-wrap CSS3 | [8] |
|||||||
| vertical-align | ||||||||
| 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 | ||||||||
| background | [9] |
[9] |
[9] |
|||||
| background-color | ||||||||
| background-image | ||||||||
| background-position | ||||||||
| background-repeat | ||||||||
| HSL Colors CSS3 | ||||||||
| HSLA Colors CSS3 | ||||||||
| Opacity CSS3 | ||||||||
| RGBA Colors CSS3 | ||||||||
| 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 | ||||||||
| box-shadow CSS3 | [10] |
|||||||
| height | ||||||||
| margin | [20] |
[11] |
||||||
| padding | [12] |
|||||||
| width | [19] |
|||||||
| max-width | [17] |
[17] |
||||||
| min-width | [18] |
[18] |
||||||
| 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 | ||||||||
| clear | ||||||||
| clip | ||||||||
| cursor | ||||||||
| display | ||||||||
| float | ||||||||
| left | ||||||||
| opacity | ||||||||
| outline CSS3 | [13] |
[13] |
[13] |
|||||
| overflow | [14] |
[14] |
[14] |
[15] |
||||
| position | ||||||||
| resize CSS3 | 16] |
[16] |
||||||
| right | ||||||||
| top | ||||||||
| visibility | ||||||||
| z-index | ||||||||
| 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 | ||||||||
| list-style-position | ||||||||
| list-style-type | ||||||||
| 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 | ||||||||
| border-spacing | ||||||||
| caption-side | ||||||||
| empty-cells | ||||||||
| table-layout | ||||||||
| 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
marginin Outlook 2007/2010. Margins around images are ignored. - 1 February 2012
-
background-imageis now supported in Gmail. - 5 September 2011
-
Added email client results for
max-widthandmin-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.
- 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.
- 27 August 2009
-
Added test results for the just launched MySpace Mail.
- 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.
- 26 August 2008
-
Replaced .Mac results with MobileMe.
- 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.
- 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.
- 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.
About • Our Book • Contact • API • Anti-spam Policy • Terms of Use • Privacy Policy
Proud founders of the Email Standards Project and supporters of the design community.



