You can use the borders and padding tools to create border lines separating pieces of content, and manage the spacing between different elements.
Before you start
Borders and padding apply only to the block you select. To run the same border along several blocks, add it to each block.
Button blocks have their own border and padding settings in the Settings tab, including Border radius for rounded corners. Learn more in Buttons.
Rounded corners are only available for buttons. You can't round the corners of other blocks with the Borders & padding settings.
Open borders and padding settings
In EasyEditor, select the block you want to apply the style to.
Select Styles from the left-side panel.
Expand the Borders & padding section of the menu.
Add borders
The borders tool has four controls:
Border weight
Controls the thickness of the border. Enter the weight in pixels you want to use.Style
Expand the drop-down menu and select a solid, dashed, or dotted line style.Location
Select the icon for the edge where you want the border: all four edges, top, left, right, or bottom. You can select more than one edge. Select the same icon again to remove the border from that edge.Colour
Enter a hex code or select the paint can icon to choose the colour you want for the border.
The weight, style, and colour apply to every edge you select. You can't use a different weight, style, or colour on each edge.
The border sits on the outer edge of the block.
Add padding
Padding is the space between the edge of the block and its contents. It sits inside the border, so adding padding moves the content away from the border. It doesn't make the border shorter.
By default, you can apply a value for the horizontal and vertical padding respectively. If you want to edit each side of a block independently, select the four side icon next to the Padding section title, then enter a value for the top, right, bottom, and left.
Enter the amount of padding in pixels you want for each area of padding. The maximum is 100 pixels for each value.
Padding applies to the block on all devices. To use different padding on mobile devices, duplicate the block. Set one copy to Show only on desktop devices and the other to Show only on mobile devices, then change the padding on each copy.
Learn more in Columns and spacers and Change the default padding of building blocks in EasyEditor.
Add a divider line
To separate content with a line that runs the full width of your campaign, add a border to a Spacer block:
In the left menu, go to Build > Layout.
Drag the Spacer block into your email campaign.
Select the block.
Select Styles from the left-side panel and expand Borders & padding.
For Location, select the top or bottom edge icon.
Set the Border weight, Style, and Colour for your line.
A border always runs the full width of its block, and padding doesn't shorten it.
Add a shorter divider line
To add a line that doesn't run the full width, add a horizontal rule to your campaign's source code.
Only edit the source code if you understand HTML. If you edit or remove the wrong code, you might break your campaign.
In EasyEditor, expand the Utilities drop-down menu and select Edit source.
Place your cursor in the code box, then press Ctrl-F (Command-F on a Mac) and search for some of the text that comes just before where you want the line.
On a new line after that content, paste this code:
<hr style="width: 60%; height: 0; margin: 20px auto; border: 0; border-top: 2px solid #000000;">Select Save.
Select Edit design to return to EasyEditor.
To change the line, edit these values in the code:
Value | What it does |
| The length of the line, as a percentage of the width of the block. |
| The thickness of the line, its style, and its colour. For the style, use |
| The space above and below the line. |
Don't change height: 0 or border: 0. They stop email clients adding their own default line.
Learn more in Edit the source code of an email campaign.
Check how your borders and padding display
Before you send your campaign, select Preview to check your borders and padding, then send yourself a test email.
Some email clients, such as Outlook, can display borders and padding differently from the preview. Check your test email in the email clients your contacts use.