The Ultimate Guide to CSS

A complete breakdown of the CSS support for every popular mobile, web and desktop email client on the planet. Download the complete guide for all 18 clients, or see the top 10 below.

Style Element Outlook 2007/10/13 + Outlook 03/Express/Mail iPhone iOS 7/iPad Outlook.com Apple Mail 6.5 Yahoo! Mail Google Gmail Android 4 (Gmail) +
Responsive
Responsive No No Yes No Yes No No No
Style Element
<style> in <head> Yes Yes Yes Yes Yes Yes No Yes
<style> in <body> Yes Yes Yes Yes Yes Yes No Yes
Link Element
<link> in <head> Yes Yes Yes No Yes No No Yes
<link> in <body> Yes Yes Yes No Yes No No Yes
Selectors
* No Yes Yes No Yes No Yes Yes
E Yes Yes Yes Yes Yes Yes No Yes
E[foo] No Yes Yes Yes Yes No Yes Yes
E[foo="bar"] No Yes Yes Yes Yes No Yes Yes
E[foo~="bar"] No Yes Yes No Yes No Yes Yes
E[foo^="bar"] No Yes Yes No Yes No Yes Yes
E[foo$="bar"] No Yes Yes No Yes No Yes Yes
E[foo*="bar"] No Yes Yes No Yes No Yes Yes
E:nth-child(n) No No Yes Yes Yes No No Yes
E:nth-last-child(n) No No Yes Yes Yes No No Yes
E:nth-of-type(n) No No Yes Yes Yes No No Yes
E:nth-last-of-type(n) No No Yes Yes Yes No No Yes
E:first-child No Yes Yes Yes Yes No No Yes
E:last-child No No Yes Yes Yes No No Yes
E:first-of-type No No Yes Yes Yes No No Yes
E:last-of-type No No Yes Yes Yes No No Yes
E:empty No No Yes Yes Yes No No Yes
E:link Yes Yes Yes No Yes No No Yes
E:visited Yes No Yes No No Yes No Yes
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 YesYes Yes No No No
E:target No No No Yes No No No No
E::first-line No Yes Yes Yes Yes Yes No Yes
E::first-letter No Yes Yes Yes Yes Yes No Yes
E::before No No Yes No Yes No No Yes
E::after No No Yes No Yes No No Yes
E.classname Yes Yes Yes Yes Yes Yes No Yes
E#id Yes Yes Yes No Yes Yes No Yes
E:not(s) No No Yes No Yes No No Yes
E F Yes Yes Yes Yes Yes Yes No Yes
E > F No Yes Yes Yes Yes Yes Yes Yes
E + F No Yes Yes Yes Yes Yes No Yes
E ~ F No Yes Yes Yes Yes No No Yes
Text & Fonts
@font-face No No Yes No Yes No No No
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 Info 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 No Yes
text-transform Yes Yes Yes Yes Yes Yes Yes Yes
white-space Yes Yes 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
text-fill-color CSS3 No No Yes No Yes No No Yes
text-fill-stroke CSS3 No No Yes No Yes No No Yes
Color & Background
color Yes Yes Yes Yes Yes Yes Yes Yes
background Info Yes Yes Info Yes Yes Yes Yes
background CSS3 No No Yes No Yes No No Yes
background-color Yes Yes Yes Yes Yes Yes Yes Yes
background-image No Yes Yes No Yes Yes Yes Yes
background-position No Yes Yes No Yes Yes Yes Yes
background-repeat No Yes Yes No Yes Yes Yes Yes
background-size CSS3 No No Yes No Yes Info No Info
HSL Colors CSS3 Yes Yes Yes Yes Yes Yes Yes Yes
HSLA Colors CSS3 No No Yes No Yes No Yes Yes
Opacity CSS3 No No Yes Yes Yes No No Yes
RGBA Colors CSS3 No No Yes No Yes No Yes Yes
Box Model
border Yes Yes Yes Yes Yes Yes Yes Yes
border-color No No Yes Yes Yes Yes Yes No
border-image CSS3 No No Yes No Yes No No No
border-radius CSS3 No No Yes Yes Yes No Yes No
box-shadow CSS3 No No Yes Yes Yes No No No
height No Yes Yes Yes Yes Yes Yes Yes
margin Yes 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 Yes Yes Yes Yes Yes Yes Yes
min-width No Yes Yes Yes Yes Yes Yes Yes
Positioning & Display
bottom No Yes Yes Yes Yes No No Yes
clear No Yes Yes Yes Yes Yes Yes Yes
clip No Yes Yes No Yes No No Yes
cursor No Yes Yes Yes Yes Yes No No
display No Yes Yes Yes Yes Yes No Yes
float No Yes Yes No Yes Yes Yes Yes
left No Yes Yes No Yes No No Yes
opacity No No Yes Yes Yes No No Yes
outline CSS3 No No Yes Info Yes Info Info Yes
overflow No Yes Yes Info Yes Info Info Info
position No Yes Info Yes Yes No No Yes
resize CSS3 No Yes Yes Info Yes Info No No
right No Yes Yes Yes Yes No No Yes
top No Yes Yes Yes Yes No No Yes
visibility No Yes Yes Yes Yes Yes No Yes
z-index Yes Yes Yes Yes Yes Yes No Yes
Lists
list-style-image No Yes Yes No Yes Yes No Yes
list-style-position No Yes Yes No Yes Yes Yes Yes
list-style-type No Yes Yes Yes Yes Yes Yes Yes
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 Yes Yes Yes Yes Yes Yes
empty-cells No No Yes Yes Yes Yes Yes Yes
table-layout Yes Yes Yes Yes Yes Yes Yes Yes
HTML 5
<canvas> No No Yes Yes No No No No
<audio> No No Yes Info Yes No No No
<video> No No Yes Info Yes No No No

Version History

19 September 2013

Added support for @font-face, @media and HTML 5 media tags in email clients, as well as email-relevant CSS properties. We re-tested all webmail clients and the latest versions of existing clients.

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