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 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 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
Line height is not always consistent when viewing emails in Outlook. This is especially true…
March 1, 2017
If you use an Email Service Provider, you now get some pretty powerful technology alongside…
February 10, 2017