How Do I Add A Border to the Blocks in my Email?

Honored Contributor

How Do I Add A Border to the Blocks in my Email?

UPDATED: June 2018


The information below includes editing the HTML of your email. Currently these steps will not work in  our Third Generation Editor as these templates do not offer access to their HTML. Instead there are some templates in this editor that have a border by default. 




Writing a newsletter email takes a lot of work. You have to decide what content you wish to distribute to your contacts and the right amount of it. Once you’ve decided on the content you want to share, you need to decide what template you want to use. Maybe you already have a template that you use newsletter over newsletter each send. Whether you are using a copied template or a brand new one, you want the look and feel to be inviting and fully represent your brand. You may have found the perfect template and filled out all of your content only to stand back and look and think that something might be missing. What might be missing are borders. You need something to separate your content besides a spacer or a divider. You want something crisp and clear that goes around your entire block of content. But how do you do that? Read on to find out!


First, let’s open up your Email by clicking on Campaigns > then the name of your Email in Draft. You can also click on Create if you haven’t chosen a template yet.




Once you are within your email template, click on the block to open it up for editing that you want to add the border to. (Please note that this does require HTML coding, but we’ll walk you right through the steps.)


Next, click on the HTML icon on the edit toolbar for your block. This will open up the HTML overlay so you can edit the HTML coding for this block.


edit html of block.png


Now look for the <td tag and right after “style=” add the following code: 


td section of html.png


border: 1px solid #000000;


You can make the border thicker by adding to the 1px, for example 2px, 5px, etc. Also you can change the color if you don’t want black. You would just need to know the hex value of the color you want to use. Replace the #000000 with your preferred hex value. You can use a free tool like ColorCop  (not supported by Constant Contact) to find the hex value.


Click Update to close the html box.


Then hit Save in your block and you will see your new border around your block!


Here is what 1px wide looks like:


1px border around block.png


And here is the 5px around the block:


5px border around block.png


Now that you know how to add a border to your blocks, log into your account and get started. Take your knowledge and make your blocks of content really stand out to your contacts. Also, give yourself a pat on the back for learning some html coding while you’re at it!


Any questions let us know!


Does your account look different than this? Check out our post in the Toolkit Product Board.


Want to add a border to your entire email? Check out our post "How Do I Add a Border to My Email?"

Register for our "Making Sense of Online Marketing for Retail" Webinar

Join us on Thursday, August 13th at 2pm ET for a free webinar where we'll discuss how to incorporate online marketing into your retail store.

Read More