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

Border-radius doesn't support email template. Try to follow email template design standard while doing design. — shanidkv, Jan 15 '15 at 07:25
You can place the images of that corners and align them to the correct corners. — Karlen Kishmiryan, Jan 15 '15 at 07:33
@KarlenKishmiryan I can't do this because in that I have to put some (dynamic) text !! — Junaid, Jan 15 '15 at 07:41
You need to do this oldschool. Create 3x3 table, put text in middle and images of borders in celles around. — Volvox, Jan 15 '15 at 08:02
You can, for example, align left the left corner, align right the right corner and place a *dynamic* `div` between them. This is how people made the *radiused* borders (and actually any *custom* border) before `border-radius` property. — Karlen Kishmiryan, Jan 15 '15 at 08:03
@ShurvirMori sorry, I don't have much time for that. But the idea is to put elements in the following order from top/left to bottom/right: 1) top-left corner image 2) top border image 3) top-right corner image then, next line: 4) left border image 5) div with your content 6) right border image then, next line: 7) bottom-left corner image 8) bottom border image 9) bottom-right corner image and you have to make sure the side borders are expanding based on your content. — Karlen Kishmiryan, Jul 02 '19 at 08:37

score 3 · Answer 1 · answered Jan 15 '15 at 11:00

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>

score 3 · Answer 2 · answered Mar 16 '15 at 13:20

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.

border-radius alternative in email Templates

2 Answers2