Email coding tip: curved edges for boxes

Standard

How to make curved edges for boxes and speech bubbles

I was getting sick of my speech bubbles being square as they don’t look nice, so dug about and managed to find a code for making bubbles rounded in emails.

It doesn’t work for all email clients i.e. most outlook versions, but if it doesn’t it reverts back to square edges (I tested it in Litmus).

Instead of using padding and a background colour for speech bubbles like this:

<td width=”403″ style=“font:13px normal Arial, Helvetica, sans-serif;color:#58595b;line-height:19px;padding:9px 9px;” bgcolor=”#e6e6e6″>

I am a square box  </td>

I wrote this into the code:

<td width=”403style=”font:13px normal Arial, Helvetica, sans-serif;color:#58595b;line-height:19px;border-radius: 9px; -moz-border-radius: 9px; -webkit-border-radius: 9px; border:3px solid #e6e6e6; background-color: #e6e6e6; padding: 9px;”>

I am a round box (well in most browsers)</td>

Email rounded box html coding example

Now you have a rounded box!

Advertisements