Extravision Blogsblog

Recent Posts



Help using Borders in HTML emails

May 3, 2011

Borders created using CSS are unreliable in HTML emails, even when coded inline. Browsers and email clients all have different ways of displaying borders and they may or may not add extra pixels to the overall width of your template, leaving gaps in your design.  They can also render inside your <td> or outside.  Here’s our solution to the problem!

Traditional borders
Traditional borders can still be achieved using background colours and <td>’s. The example below shows the code and the resulting border it produces. Note the 1pixel spacer image used to force the td to have a width of 1 pixel and ‘display:block’ added to stop any additional padding being added by Hotmail.

Drop shadows
Drop shadows can be achieved using images but this requires a template having a set height, making the email template inflexible and easy for email clients and browsers to break.

Expanding the above border technique it’s possible to create drop shadows using <td>’s and background colours.

To do this we need to first analyse how a drop shadow effect works.

As you can see in this close up, the fairly soft shadow is made up of around 7 different shades of grey, the more colours used, the softer and wider the effect.

Here’s an example of a drop shadow achieved in html using 3 <td>’s with background colours set, the table structure and the code used.

In this example a top and bottom image has been used so we can have slightly rounded corners but the sides are completely image free meaning the template can have as much or as little copy in it and the drop shadow will expand or contract to fit it.

Background colour technique
A clean and simple option for separating your email from the background is to set the background colour of your email to a contrasting colour and use a top and bottom image.

All of these techniques can be combined, a rounded border, a border with a shadow. Below are a few examples.

Posted by Joel Jarman
Tip of the month

No comments

Comments are closed.

From the Blog

How to craft the perfect re-engagement email: Topshop example

In an ideal world, everyone on your list would be eagerly awaiting your email. They…

Jenni Malley
June 1, 2017

How To Get Your Perfect Email Template

If you send email campaigns then you probably use a template. Not every email campaign…

Jenni Malley
May 12, 2017

Latest Tweets

Get in touch

MediaCity UK
M50 2AB
Find us on Google maps

Main: +44 (0) 161 817 2929
Support: +44 (0) 161 817 2930
Email: [email protected]


Facebook IconTwitter IconVisit Our BlogVisit Our BlogVisit Our Blog