CODEWITHSUNDEEP
htmlcssemailemail-templates
Junaid S.
Junaid S.

Reputation: 2642

border-radius alternative in email Templates

Well I am designing email templates and I know that CSS3 is not working on most of the email providers. I am trying bend the borders (that can be DONE by border-radius - but it is NOT supported by most of email providers). So is there any alternative of border-radius that works on all the email providers (yahoo, outlook and gmail).

Upvotes: 5

Views: 38482

Answers (2)

Gortonington
Gortonington

Reputation: 3587

Depending on the clients your recipients use, border-radius is a possibility (CSS-Support). Outside of some of the lower popularity clients (e.g. Yahoo - see here for market share), the bulletproof button technique will work. Outlook also does not support border-radius, BUT it can be replicated through VML (most of the VML is written for you in the above tool).

This tool can be helpful outside just a CTA button, it would just take a bit of editing and testing.

Upvotes: 3

wildavies
wildavies

Reputation: 1317

Nested tables with images to give the impressions of rounded corners is the way to do it.

See http://jsfiddle.net/williamtdavies/sehp07xe/ for one way of doing this without CSS. This technique is taken from an email sent by O2 and uses 4 corner images to give you rounded corners.

Another option would be to only use two corner images, one which would give you top left and bottom left, and another that would give you top right and bottom right. Text then goes in the middle.

<table cellspacing="0" cellpadding="0" border="0" class="button" bgcolor="#fff">
    <tbody>
        <tr>
            <td width="10" valign="top" height="2" align="left"><img width="2" height="2" style="display:block;" alt="" src="https://dub125.mail.live.com/Handlers/ImageProxy.mvc?bicild=&amp;canary=nX4c2hkw9FozzZj%2bs3llZ3Tijses1c0WyDInrqVhOp0%3d0&amp;url=http%3a%2f%2fimg.o2-email.co.uk%2fassets%2fftp%2forbis-04443%2fbtnTopLeft.gif"/></td>
            <td></td>
            <td width="10" valign="top" align="right"><img width="2" height="2" style="display:block;" alt="" src="https://dub125.mail.live.com/Handlers/ImageProxy.mvc?bicild=&amp;canary=nX4c2hkw9FozzZj%2bs3llZ3Tijses1c0WyDInrqVhOp0%3d0&amp;url=http%3a%2f%2fimg.o2-email.co.uk%2fassets%2fftp%2forbis-04443%2fbtnTopRight.gif"/></td>
        </tr>
        <tr>
            <td height="26" class="ecxbtn-height"></td>
            <td>
                <table cellspacing="0" cellpadding="0" border="0" class="button">
                    <tbody>
                        <tr>
                            <td><font style="font:13px Verdana, Helvetica, sans-serif;color:#2587bd;" class="ecxbtn-copy"><a id="ecxasset_link_9164@#@http://www.dogorcat.co.uk?cm_mmc=Email-_-4443_DogCat_Xmas_email-_-CTA_button-_-Find_the_perfect_presents" href="http://t.o2-email.co.uk/JP5-1UNP-3SQVU-11L8R-1/c.aspx" target="_blank" style="text-decoration:none;color:#2587bd;display:block;width:100%;">Find the perfect presents </a></font></td>
                            <td width="18" align="right">
                                <table border="0" cellspacing="0" cellpadding="0">
                                    <tbody>
                                        <tr>
                                            <td height="2"></td>
                                        </tr>
                                        <tr>
                                            <td><a href="http://t.o2-email.co.uk/JP5-1UNP-3SQVU-11L8S-1/c.aspx" target="_blank"><img src="https://dub125.mail.live.com/Handlers/ImageProxy.mvc?bicild=&amp;canary=nX4c2hkw9FozzZj%2bs3llZ3Tijses1c0WyDInrqVhOp0%3d0&amp;url=http%3a%2f%2fimg.o2-email.co.uk%2fassets%2fftp%2forbis-04443%2fbtnArrowBlueOnWhite.gif" alt="" width="7" height="10" border="0" style="display:block;"/></a></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td></td>
        </tr>
        <tr>
            <td valign="bottom" align="left"><img width="2" height="2" style="display:block;" alt="" src="https://dub125.mail.live.com/Handlers/ImageProxy.mvc?bicild=&amp;canary=nX4c2hkw9FozzZj%2bs3llZ3Tijses1c0WyDInrqVhOp0%3d0&amp;url=http%3a%2f%2fimg.o2-email.co.uk%2fassets%2fftp%2forbis-04443%2fbtnBottomLeft.gif"/></td>
            <td></td>
            <td valign="bottom" align="right"><img width="2" height="2" style="display:block;" alt="" src="https://dub125.mail.live.com/Handlers/ImageProxy.mvc?bicild=&amp;canary=nX4c2hkw9FozzZj%2bs3llZ3Tijses1c0WyDInrqVhOp0%3d0&amp;url=http%3a%2f%2fimg.o2-email.co.uk%2fassets%2fftp%2forbis-04443%2fbtnBottomRight.gif"/></td>
        </tr>
    </tbody>
</table>

Upvotes: 3

Related Questions