Will it work?

CSS Support

The Ultimate Guide

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.

Share the love
Style Element Outlook 2007/10/13 + Outlook 2000/03 Apple iPhone/iPad Outlook.com Apple Mail 4 Yahoo! Mail Beta Google Gmail Android 2.3 (Gmail) +
<style> in <head> Yes Yes Yes Yes Yes Yes No No
<style> in <body> Yes Yes Yes Yes Yes Yes No No
<link> in <head> Yes Yes Yes No Yes No No No
<link> in <body> Yes Yes Yes No Yes No No No
Selectors
* 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 Info No No
E:visited Yes No Yes Yes No Info 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 Info No
E#id Yes Yes Yes No Yes Yes Info 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
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 Info 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 Info Yes Info Info 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 Info Yes Yes Yes Yes No No
vertical-align No Yes Yes Yes Yes Yes Yes Yes
Color & Background
color Yes Yes Yes Yes Yes Yes Yes Yes
background Info Yes Yes Info Yes Yes Yes Info
background-color Yes Yes Yes Yes Yes Yes Yes Yes
background-image No Yes Yes Info Yes Yes Yes No
background-position No Yes Yes No Yes Yes No No
background-repeat No Yes Yes No Yes Yes Info 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
border Yes Yes Yes Yes Yes Yes Yes Yes
box-shadow CSS3 No No No Info No No No No
height No Yes Yes Yes Yes Yes Yes Yes
margin Info Yes Yes No Yes Yes Yes Yes
padding Info Yes Yes Yes Yes Yes Yes Yes
width Info Yes Yes Yes Yes Yes Yes Yes
max-width No No Yes No Yes Info Info Yes
min-width No No Yes No Yes Info Info Yes
Lists
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
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 No Yes Yes Yes Yes Yes Yes Yes

Version History

30 January 2013

Outlook.com no longer supports the margin CSS property, including margin-top, margin-right, margin-bottom and margin-left. Float support has also been dropped

17 July 2012

Added Outlook 2013 Preview. CSS test results are identical to Outlook 2007 and 2010 - see blog post for details.

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 Outlook.com. 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 mixed 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

Sign up for free.
Then send campaigns for as little as $9/month

Create an account