Pages Navigation Menu
cup of tea

How to use borders in html email design

Using borders in html email,newsletters can be quite trouble if you dont know the proper technique to use them.In this article i will be explaining useful tricks and everything you need to know about using borders in html emails.

Support for css properties

Before designing any html email,newsletter we should know that the css property we are going to use in email design is supported by which email clients.

It is important as support for even simple CSS varies considerably between clients, and even different versions of the same client.Otherwise designing an HTML email that renders consistently across the major email clients can be very time consuming.

To make this easier for us campaignmonitor has put together a guide to save you the time and frustration of figuring it out for yourself.

You can see the web-based version of the guide that focus on the 10 most popular email clients on the market or download the complete guide in PDF format that report on all 24 email clients across the desktop, web and mobile email world.

Support for borders in html email across the major email clients

As you can see border property is supported by all major email clients except lotus notes 6 and 7.

borders in html email

support for border property

Now we are ready to go and use borders in html email design.For pixel perfect design note some of these  points about using borders in html email.

  • Always use borders on <td> tag.
  • Avoid using  borders directly on <table>,<img> tag.
  • Do not use width on <td> to which you are applying border,instead apply width to wrapper table.It will correct box model problems.

Applying border to images in html emails

(A.) Technique one applying border to td.

</pre>
<table width="144" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="border: 1px solid #bababa;" bgcolor="#ffffff"><a href="#"> <img style="display: block;" src="small_image_5.jpg" alt="" border="0" /> </a></td>
</tr>
</tbody>
</table>
<pre>

Advantage of this technique is that less code is required,it will render across major email clients that support border property but not in lotus notes 5/6 that do not support border property.

(B.) Technique two applying background color  to td.

</pre>
<table width="144" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="font-size: 0px; line-height: 1px;" bgcolor="#bababa" width="144" height="1"></td>
</tr>
</tbody>
</table>
<table width="144" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="font-size: 0px; line-height: 1px;" bgcolor="#bababa" width="1"></td>
<td bgcolor="#ffffff" width="142"><a href="#"> <img style="display: block;" src="small_image_5.jpg" alt="" border="0" /> </a></td>
<td style="font-size: 0px; line-height: 1px;" bgcolor="#bababa" width="1"></td>
</tr>
</tbody>
</table>
<table width="144" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="font-size: 0px; line-height: 1px;" bgcolor="#bababa" width="144" height="1"></td>
</tr>
</tbody>
</table>
<pre>

Advantage of this technique is that,it will render across all email clients including that do not support border property.Disadvantage is that it requires for coding.

Leave a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>