border-radius alternative in email Templates

Question

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).

Answer 1

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>