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, 1 year 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, 1 year 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., 1 year ago
Redferret wrote:

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, 1 year 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, 1 year ago
ixm wrote:

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

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

Create an account