# A Complete Guide to Email CSS Support 

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "headline": "Email CSS Support Guide for Developers [Human Written]",
  "description": "This guide provides you with the different CSS properties that are supported in various email clients across browser, desktop and mobile versions. ",
  "image": "https://res.cloudinary.com/mailmodo/image/upload/v1724158686/strapi/Email_code_550bbee5e6_2e4ac4cc00.png",
  "datePublished": "2024-08-20T10:38:48.001Z",
  "dateModified": "2025-05-23T07:01:09.726Z",
  "publisher": {
    "@type": "Organization",
    "name": "Mailmodo",
    "url": "https://www.mailmodo.com/",
    "sameAs": [
      "https://www.linkedin.com/company/mailmodo/",
      "https://www.facebook.com/mailmodo/",
      "https://www.instagram.com/mailmodohq/",
      "https://www.youtube.com/@mailmodo"
    ],
    "logo": "https://www.mailmodo.com/static/images/logo/logo-full.svg",
    "description": "Mailmodo is a complete email marketing platform that helps email marketers to create and send interactive emails to drive growth and engagement.",
    "address": {
      "@type": "PostalAddress",
      "addressLocality": "Lewes",
      "addressRegion": "DE",
      "postalCode": "19958",
      "streetAddress": "Mailmodo Technologies Inc. 16192, Coastal Highway",
      "addressCountry": {
        "@type": "Country",
        "name": "US"
      }
    },
    "contactPoint": {
      "@type": "ContactPoint",
      "email": "enquiries@mailmodo.com",
      "contactType": "customer service"
    }
  }
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Email CSS Support Guide for Developers [Human Written]",
  "description": "This guide provides you with the different CSS properties that are supported in various email clients across browser, desktop and mobile versions. ",
  "image": "https://res.cloudinary.com/mailmodo/image/upload/v1724158686/strapi/Email_code_550bbee5e6_2e4ac4cc00.png",
  "datePublished": "2024-08-20T10:38:48.001Z",
  "dateModified": "2025-05-23T07:01:09.726Z",
  "author": {
    "@type": "Person",
    "name": "Anjali Nair",
    "url": "https://www.mailmodo.com/guides/author/anjali-nair/"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Mailmodo",
    "logo": {
      "@type": "ImageObject",
      "url": "https://www.mailmodo.com/static/images/logo/logo-full.svg"
    }
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://www.mailmodo.com/guides/email-css-support/"
  }
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "@id": "#creator",
  "description": "Email marketing software to create and send interactive emails to maximize conversions and reinvent your user journey",
  "email": "support@mailmodo.com",
  "image": "https://www.mailmodo.com/static/images/og-image.png",
  "knowsAbout": "Email marketing",
  "legalName": "Mailmodo Technologies Inc.",
  "location": "United States",
  "logo": "https://www.mailmodo.com/static/images/logo/logo-full.svg",
  "name": "Mailmodo",
  "sameAs": [
    "https://twitter.com/mailmodo",
    "https://www.facebook.com/company/mailmodo/",
    "https://www.linkedin.com/company/mailmodo/"
  ],
  "url": "https://www.mailmodo.com/"
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://www.mailmodo.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Guides",
      "item": "https://www.mailmodo.com/guides/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "email css support",
      "item": "https://www.mailmodo.com/guides/email-css-support/"
    }
  ]
}
</script>

## Table of contents

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

Creating visually appealing and responsive email campaigns can be challenging due to the varying levels of CSS support among different [email clients](https://www.mailmodo.com/guides/email-client/). Therefore, [designing html emails](https://www.mailmodo.com/guides/html-email-design/) 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.

  

<div class="highlight-gray"> <p> <strong>💡 Related guide: <a href=https://www.mailmodo.com/guides/css-email/></strong>CSS in Email: What You Need to Know Before Getting Started</a></p> </div>

## `<style>` and `<link>` elements

### 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](https://www.mailmodo.com/guides/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](https://www.mailmodo.com/guides/email-marketing/) campaigns and reach your target audience more effectively.

## Frequently Asked Questions

### Which are the most widely supported CSS properties in email clients?


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


### What are some best practices for using CSS in emails?


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. 


### Can I add web fonts in email using CSS?


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.


### What is inline 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>`.


<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Which are the most widely supported CSS properties in email clients?\n",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "The most widely supported CSS properties include color, background color, basic font properties, text align, margin, padding, width, height, border etc. \n"
      }
    },
    {
      "@type": "Question",
      "name": "What are some best practices for using CSS in emails?\n",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "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. \n"
      }
    },
    {
      "@type": "Question",
      "name": "Can I add web fonts in email using CSS?\n",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "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.\n"
      }
    },
    {
      "@type": "Question",
      "name": "What is inline CSS?\n",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "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>`.\n"
      }
    }
  ]
}
</script>

---

**Author: Anjali Nair**

Anjali Nair is a freelance writer fond of exploring various fields and genres with her pen. Primarily an academic and fiction writer, she also has experience in corporate copywriting.

