A Complete Guide to Email CSS Support

Anjali Nair
ByAnjali Nair

19 mins read

Creating visually appealing and responsive email campaigns can be challenging due to the varying levels of CSS support among different email clients. Therefore, designing html emails that are consistent across all platforms requires you to be aware of these differences in client capabilities.

This guide will talk about the different CSS elements and their compatibility across various email clients, including their browser, desktop, and mobile applications.

Browser

Feature Outlook Yahoo! Gmail AOL
<style> in <head> βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
<style> in <body> βœ”οΈ βœ”οΈ ❌ βœ”οΈ
<link> in <head> ❌ ❌ ❌ ❌
<link> in <body> ❌ ❌ ❌ ❌

Desktop

Feature Outlook 2007 - 2013 Outlook 2000 - 2003 Apple Mail Windows Live Mail Outlook For Mac
<style> within <head> βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
<style> within <body> βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
<link> within <head> βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
<link> within <body> βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ

Mobile

Feature iOS 6 Android 4.2 Android 2.3 Gmail App
<style> within <head> βœ”οΈ βœ”οΈ βœ”οΈ ❌
<style> within <body> βœ”οΈ βœ”οΈ βœ”οΈ ❌
<link> within <head> βœ”οΈ βœ”οΈ βœ”οΈ ❌
<link> within <body> βœ”οΈ βœ”οΈ βœ”οΈ ❌

Element selectors

Browser

Selector Outlook Yahoo! Gmail AOL
* ❌ ❌ βœ”οΈ ❌
E βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
E[$attribute] ❌ ❌ ❌ βœ”οΈ
E[$attribute="$value"] ❌ ❌ ❌ βœ”οΈ
E F βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
E > F ❌ βœ”οΈ βœ”οΈ ❌
E + F ❌ βœ”οΈ βœ”οΈ βœ”οΈ
E ~ F ❌ ❌ βœ”οΈ βœ”οΈ
E:link βœ”οΈ ❌ ❌ βœ”οΈ
E:visited βœ”οΈ βœ”οΈ ❌ ❌
E:active βœ”οΈ βœ”οΈ ❌ βœ”οΈ
E:hover βœ”οΈ βœ”οΈ Only in webmail βœ”οΈ
E:focus ❌ ❌ ❌ ❌
E:target ❌ ❌ ❌ ❌
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::first-line ❌ βœ”οΈ ❌ βœ”οΈ
E::first-letter ❌ βœ”οΈ ❌ βœ”οΈ
E::before ❌ ❌ ❌ βœ”οΈ
E::after ❌ ❌ ❌ βœ”οΈ
E.classname ❌ βœ”οΈ ❌ βœ”οΈ
E#id ❌ βœ”οΈ ❌ βœ”οΈ
E:not(s) ❌ ❌ ❌ βœ”οΈ

Desktop

Selector Outlook 2007 - 2013 Outlook 2000 - 2003 Apple Mail Windows Live Mail Outlook For Mac
* ❌ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
E βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
E[$attribute] ❌ ❌ βœ”οΈ βœ”οΈ βœ”οΈ
E[$attribute="$value"] ❌ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
E F βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
E > F ❌ ❌ βœ”οΈ βœ”οΈ βœ”οΈ
E + F ❌ ❌ βœ”οΈ βœ”οΈ βœ”οΈ
E ~ F ❌ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
E:link βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
E:visited βœ”οΈ ❌ ❌ βœ”οΈ ❌
E:active ❌ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
E:hover ❌ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
E:focus ❌ ❌ βœ”οΈ ❌ ❌
E:target ❌ ❌ ❌ ❌ ❌
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::first-line ❌ βœ”οΈ βœ”οΈ ❌ βœ”οΈ
E::first-letter ❌ βœ”οΈ βœ”οΈ ❌ βœ”οΈ
E::before ❌ ❌ βœ”οΈ ❌ βœ”οΈ
E::after ❌ ❌ βœ”οΈ ❌ βœ”οΈ
E.classname βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
E#id βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
E:not(s) ❌ ❌ βœ”οΈ ❌ βœ”οΈ

Mobile

Selector iOS 6 Android 4.2 Android 2.3 Gmail App
* βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
E βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
E[$attribute] βœ”οΈ βœ”οΈ βœ”οΈ ❌
E[$attribute="$value"] βœ”οΈ βœ”οΈ βœ”οΈ ❌
E F βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
E > F βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
E + F βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
E ~ F βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
E:link βœ”οΈ βœ”οΈ βœ”οΈ ❌
E:visited βœ”οΈ βœ”οΈ βœ”οΈ ❌
E:active ❌ ❌ ❌ ❌
E:hover ❌ ❌ ❌ Only in Android
E:focus βœ”οΈ ❌ ❌ ❌
E:target ❌ ❌ ❌ ❌
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::first-line βœ”οΈ βœ”οΈ βœ”οΈ ❌
E::first-letter βœ”οΈ βœ”οΈ βœ”οΈ ❌
E::before βœ”οΈ βœ”οΈ βœ”οΈ ❌
E::after βœ”οΈ βœ”οΈ βœ”οΈ ❌
E.classname βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
E#id βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
E:not(s) βœ”οΈ βœ”οΈ βœ”οΈ ❌

Box model

Browser

Property Outlook Yahoo! Gmail AOL
border βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
border-radius [CSS3] βœ”οΈ ❌ βœ”οΈ βœ”οΈ
box-shadow [CSS3] βœ”οΈ ❌ ❌ βœ”οΈ
height βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
margin ❌ βœ”οΈ βœ”οΈ βœ”οΈ
padding βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
width βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
max-width Partial IE support Partial IE support Partial IE support Partial IE support
min-width Partial IE support Partial IE support Partial IE support Partial IE support

Desktop

Property Outlook 2007 - 2013 Outlook 2000 - 2003 Apple Mail Windows Live Mail Outlook For Mac
border βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
border-radius [CSS3] ❌ ❌ βœ”οΈ ❌ βœ”οΈ
box-shadow [CSS3] ❌ ❌ ❌ ❌ ❌
height ❌ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
margin βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
padding Partial element support βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
width βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
max-width ❌ ❌ βœ”οΈ ❌ βœ”οΈ
min-width ❌ ❌ βœ”οΈ ❌ βœ”οΈ

Mobile

Property iOS 6 Android 4.2 Android 2.3 Gmail App
border βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
border-radius [CSS3] βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
box-shadow [CSS3] ❌ ❌ ❌ ❌
height βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
margin βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
padding βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
width βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
max-width βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
min-width βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ

Tables

Browser

Property Outlook Yahoo! Gmail AOL
border-collapse βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
border-spacing βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
caption-side βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
empty-cells βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
table-layout βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ

Desktop

Property Outlook 2007 - 2013 Outlook 2000 - 2003 Apple Mail Windows Live Mail Outlook For Mac
border-collapse βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
border-spacing ❌ ❌ βœ”οΈ ❌ βœ”οΈ
caption-side ❌ ❌ ❌ ❌ βœ”οΈ
empty-cells ❌ ❌ βœ”οΈ ❌ βœ”οΈ
table-layout βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ

Mobile

Property iOS 6 Android 4.2 Android 2.3 Gmail App
border-collapse βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
border-spacing βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
caption-side ❌ βœ”οΈ βœ”οΈ βœ”οΈ
empty-cells βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
table-layout βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ

Fonts

Browser

Property Outlook Yahoo! Gmail AOL
direction βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
font βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
font-family βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
font-style βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
font-variant βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
font-size βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
font-weight βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
letter-spacing βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
line-height βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
text-align βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
text-decoration βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
text-indent βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
text-overflow [CSS3] Partial property support Partial property support Partial property support Partial property support
text-shadow [CSS3] βœ”οΈ βœ”οΈ ❌ No IE support
text-transform βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
white-space βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
word-spacing βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
word-wrap [CSS3] βœ”οΈ βœ”οΈ ❌ βœ”οΈ
vertical-align βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ

Desktop

Property Outlook 2007 - 2013 Outlook 2000 - 2003 Apple Mail Windows Live Mail Outlook For Mac
direction ❌ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
font βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
font-family βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
font-style βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
font-variant βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
font-size βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
font-weight βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
letter-spacing βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
line-height βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
text-align βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
text-decoration βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
text-indent βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
text-overflow [CSS3] ❌ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
text-shadow [CSS3] ❌ ❌ βœ”οΈ ❌ βœ”οΈ
text-transform βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
white-space βœ”οΈ ❌ βœ”οΈ βœ”οΈ βœ”οΈ
word-spacing ❌ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
word-wrap [CSS3] ❌ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
vertical-align ❌ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ

Mobile

Property iOS 6 Android 4.2 Android 2.3 Gmail App
direction βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
font βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
font-family βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
font-style βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
font-variant βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
font-size βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
font-weight βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
letter-spacing βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
line-height βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
text-align βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
text-decoration βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
text-indent βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
text-overflow [CSS3] βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
text-shadow [CSS3] βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
text-transform βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
white-space βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
word-spacing βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
word-wrap [CSS3] βœ”οΈ βœ”οΈ βœ”οΈ ❌
vertical-align βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ

Color and Background

Browser

Property Outlook Yahoo! Gmail AOL
color βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
background No image support βœ”οΈ βœ”οΈ βœ”οΈ
background-color βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
background-image βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
background-position βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
background-repeat βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
HSL Colors [CSS3] βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
HSLA Colors [CSS3] ❌ ❌ ❌ No IE support
Opacity [CSS3] βœ”οΈ ❌ ❌ No IE support
RGBA Colors [CSS3] ❌ ❌ ❌ No IE support

Desktop

Property Outlook 2007 - 2013 Outlook 2000 - 2003 Apple Mail Windows Live Mail Outlook For Mac
color βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
background No image support βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
background-color βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
background-image ❌ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
background-position ❌ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
background-repeat ❌ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
HSL Colors [CSS3] βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
HSLA Colors [CSS3] ❌ ❌ βœ”οΈ ❌ βœ”οΈ
Opacity [CSS3] ❌ ❌ βœ”οΈ ❌ βœ”οΈ
RGBA Colors [CSS3] ❌ ❌ βœ”οΈ ❌ βœ”οΈ

Mobile

Property iOS 6 Android 4.2 Android 2.3 Gmail App
color βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
background βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
background-color βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
background-image βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
background-position βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
background-repeat βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
HSL Colors [CSS3] βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
HSLA Colors [CSS3] βœ”οΈ βœ”οΈ βœ”οΈ ❌
Opacity [CSS3] βœ”οΈ βœ”οΈ βœ”οΈ ❌
RGBA Colors [CSS3] βœ”οΈ βœ”οΈ βœ”οΈ ❌

Positioning and display

Browser

Property Outlook Yahoo! Gmail AOL
bottom βœ”οΈ ❌ ❌ βœ”οΈ
clear βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
clip ❌ ❌ ❌ βœ”οΈ
cursor βœ”οΈ βœ”οΈ ❌ βœ”οΈ
display βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
float ❌ βœ”οΈ βœ”οΈ βœ”οΈ
left ❌ ❌ ❌ βœ”οΈ
opacity βœ”οΈ ❌ βœ”οΈ βœ”οΈ
outline [CSS3] Partial support Partial support Partial support Partial support
overflow Partial property support Partial property support Partial property support βœ”οΈ
position βœ”οΈ ❌ ❌ βœ”οΈ
resize [CSS3] βœ”οΈ βœ”οΈ ❌ βœ”οΈ
right βœ”οΈ ❌ ❌ βœ”οΈ
top βœ”οΈ ❌ ❌ βœ”οΈ
visibility βœ”οΈ βœ”οΈ ❌ βœ”οΈ
z-index ❌ ❌ ❌ βœ”οΈ

Desktop

Property Outlook 2007 - 2013 Outlook 2000 - 2003 Apple Mail Windows Live Mail Outlook For Mac
bottom ❌ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
clear ❌ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
clip ❌ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
cursor ❌ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
display ❌ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
float ❌ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
left ❌ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
opacity ❌ ❌ βœ”οΈ ❌ βœ”οΈ
outline [CSS3] ❌ ❌ βœ”οΈ ❌ βœ”οΈ
overflow ❌ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
position ❌ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
resize [CSS3] ❌ βœ”οΈ βœ”οΈ ❌ βœ”οΈ
right ❌ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
top ❌ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
visibility ❌ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
z-index βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ

Mobile

Property iOS 6 Android 4.2 Android 2.3 Gmail App
bottom βœ”οΈ βœ”οΈ βœ”οΈ ❌
clear βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
clip βœ”οΈ βœ”οΈ βœ”οΈ ❌
cursor βœ”οΈ ❌ ❌ ❌
display βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
float βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
left βœ”οΈ βœ”οΈ βœ”οΈ ❌
opacity βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
outline [CSS3] βœ”οΈ βœ”οΈ βœ”οΈ ❌
overflow βœ”οΈ Partial property support Partial property support Partial property support
position βœ”οΈ βœ”οΈ βœ”οΈ ❌
resize [CSS3] βœ”οΈ ❌ ❌ ❌
right βœ”οΈ βœ”οΈ βœ”οΈ ❌
top βœ”οΈ βœ”οΈ βœ”οΈ ❌
visibility βœ”οΈ βœ”οΈ βœ”οΈ ❌
z-index βœ”οΈ βœ”οΈ βœ”οΈ ❌

Lists

Browser

Property Outlook Yahoo! Gmail AOL
list-style-image ❌ βœ”οΈ ❌ βœ”οΈ
list-style-position ❌ βœ”οΈ βœ”οΈ βœ”οΈ
list-style-type βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ

Desktop

Property Outlook 2007 - 2013 Outlook 2000 - 2003 Apple Mail Windows Live Mail Outlook For Mac
list-style-image ❌ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
list-style-position ❌ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
list-style-type ❌ βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ

Mobile

Property iOS 6 Android 4.2 Android 2.3 Gmail App
list-style-image βœ”οΈ βœ”οΈ βœ”οΈ ❌
list-style-position βœ”οΈ βœ”οΈ βœ”οΈ βœ”οΈ
list-style-type βœ”οΈ βœ”οΈ βœ”οΈ ❌

Conclusion

Email design is both an art and a science. To create emails that render correctly and consistently across all recipients’ devices, it is important to keep yourself updated about CSS support across email clients and their browser, desktop, and mobile applications. By designing with these considerations in mind, you can enhance the performance of your email marketing campaigns and reach your target audience more effectively.

FAQs

The most widely supported CSS properties include color, background color, basic font properties, text align, margin, padding, width, height, border etc.

Best practices include using inline CSS, testing across multiple email clients, avoiding CSS properties with poor support, and providing fallback options for features such as web fonts and images.

Web fonts are supported in some email clients such as Apple Mail and Gmail. However, clients such as Outlook do not support them. Therefore, it is important that you provide fallback fonts in your CSS.

Inline CSS is a method of applying CSS styles directly to the individual HTML elements within the HTML document itself rather than in a separate CSS file or within a <style> tag in the document’s <head>.

What should you do next?

You made it till the end! Here's what you can do next to grow your business:

2_1_27027d2b7d
Get smarter with email resources

Free guides, ebooks, and other resources to master email marketing.

1_2_69505430ad
Do interactive email marketing with Mailmodo

Send forms, carts, calendars, games and more within your emails to boost ROI.

3_1_3e1f82b05a
Consult an email expert

30-min free email consultation with an expert to fix your email marketing.

Table of contents

chevron-down
`<style>` and `<link>` elements
Element selectors
Box model
Tables
Fonts
Color and Background
Positioning and display
Lists
Conclusion

Fresh Marketing Ideas, Every Week.

Get the latest marketing roundup & news

Get 3X conversions
with interactive emails

Check.svg

Create & send interactive emails without coding

Check.svg

Put revenue on auto-pilot with pre-built journeys

Check.svg

Save time with AI-powered email content creation

1000+ businesses grew with Mailmodo, including

Frame_1110165681_3_b26b1a7573
Group_1110165532_1_bf39ce18b3
Ellipse_Gradientbottom_Bg
Ellipse_Gradientbottom_Top
gradient_Right