Email coding tip: curved edges for boxes


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!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s