Border-Radius Support in Email.

Just a follow up from a Twitter conversation.

Here is a quick button I threw together using Border-radius:

<table border="0" cellpadding="10" cellspacing="0" width="150">
        <tr>
            <td align="center" style="background: #2fbf6f; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border-bottom: 2px solid #03883e !important;" valign="top">
                <a href="##" style="color: #FFFFFF; display: block; font-size: 16px; font-weight: bold; text-align: center; text-decoration: none; text-transform: uppercase; font-family:Arial, Helvetica, sans-serif;">Order now</a>
            </td>
        </tr>
    </table>

And here's how it degrades across email clients.
Note: Some of the colours/sizes are off as they were screenshots taken from different testing areas/platforms.
Note2: As RedFerret pointed out - if you remove !important from the code above the border will display on Outlook 2007/2010/2013.

https://pbs.twimg.com/media/BNIxlsoCQAAb6Ys.jpg

roshodgekiss roshodgekiss, 2 years ago

Thanks, Alex - this is massively helpful! We'll look towards updating our CSS support guide where necessary, too.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Redferret, 2 years ago

Good Stuff! If you take !important off the border declaration then it'll work in Outlook 2007+.

We should also clarify that Outlook 2011 is a mac based client with good standards support


Gmail app apologist
Alex I., 2 years ago
Redferret :

Good Stuff! If you take !important off the border declaration then it'll work in Outlook 2007+.

We should also clarify that Outlook 2011 is a mac based client with good standards support

Ah, thanks for pointing that out. I was in a rush when I threw this together so I'll add both points into the OP.

Thanks RF!

ixm, 2 years ago

The Android Gmail app also supports border-radius (at least as of Android 4.4.2 on a Nexus 4).  You may want to update the CSS Guide (http://www.campaignmonitor.com/css/) to reflect this since the 19 September 2013 guide update.

Redferret, 2 years ago
ixm :

The Android Gmail app also supports border-radius (at least as of Android 4.4.2 on a Nexus 4).  You may want to update the CSS Guide (http://www.campaignmonitor.com/css/) to reflect this since the 19 September 2013 guide update.

Interesting, I also noticed bg images working in the Gmail app today. media queries can only be a matter of time


Gmail app apologist

Join 150,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098