Download 5 FREE Border Images for Divi

September 30, 2018

It’s always great to have extra resources that you can use when building a new website for yourself or for a client. That’s why we’re making sure you receive new layout packs every week. But there are other resources that may come in handy as well, such as “border images” or images that you can use along one side or another of a Divi design element to add a stylistic flourish. Using Divi’s built-in options along with these border images can bring stunning results. In this post, we’ve provided you with 5 different border images which you can download for free below. We’re going to explain how you can use these border images to your advantage and create a stunning end result.

Let’s get to it!


Let’s take a look at the different border images you’ll be able to download further down this post. For each one of the shapes, you’ll find 4 versions: a top, bottom, left and right one. These images will allow you to achieve the exact same result as shown in the first four images below:

download-5-free-border-images-for-divi Theme Builder Layout

Download The Image Files for FREE

To get your hands on the free border images, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!


  • Once you download and unzip the folder containing all 5 border images, you will find 4 subfolders: top border, bottom border, left border and right border
  • This means that there’s a total of 20 images files available for you to use
  • Later on this post, you’ll find the accompanying settings that match each one of the border sides
  • To top it off, you can combine the border images with gradient overlays
  • These color overlays will help you make the images appear as vibrant or subtle as you want
  • You are free to use these border images without any restrictions, even for commercial purposes

Creating the Overall Design

Add New Section


Let’s start by creating the overall design we’ve used to showcase the border images. Open a new or existing page, add a new regular section and add some custom padding:

  • Top Padding: 300px
  • Bottom Padding: 300px

download-5-free-border-images-for-divi Theme Builder Layout

Add New Row

Column Structure

Continue by adding a new row to your section using the following column structure:

download-5-free-border-images-for-divi-1 Theme Builder Layout


Without adding any modules yet, open the row settings, go to the Sizing settings and make the row fullwidth.

  • Make This Row Fullwidth: Yes

download-5-free-border-images-for-divi-2 Theme Builder Layout

Add Title Text Module to Column 1

Add H2 Content Box

Let’s start adding some modules! The first module that’s needed is a Text Module. Add one to the first column and add your H2 copy of choice to the content box.

download-5-free-border-images-for-divi-3 Theme Builder Layout

Heading Text Settings

Then, make some changes to the H2 text settings in the Design tab.

  • Heading 2 Font: Abril Fatface
  • Heading 2 Text Size: 80px (Desktop), 70px (Tablet), 50px (Phone)

download-5-free-border-images-for-divi-4 Theme Builder Layout


Continue by adding some margin to the top of this Text Module.

  • Top Margin: 150px

download-5-free-border-images-for-divi-5 Theme Builder Layout

Add Link Text Module to Column 1

Add Link to Content Box

Right below the title Text Module you’ve just added, go ahead and add a new Text Module. We’re using this Text Module as a button so make sure you add a link to the CTA.

download-5-free-border-images-for-divi-6 Theme Builder Layout

Link Text Settings

Next, change the link text settings in the Design tab.

  • Link Font Weight: Ultra Bold
  • Link Font Style: Uppercase
  • Link Text Color: #000000
  • Link Text Size: 21px

download-5-free-border-images-for-divi-7 Theme Builder Layout


Add some top margin to create space between this Text Module and the previous one as well.

  • Top Margin: 100px

download-5-free-border-images-for-divi-8 Theme Builder Layout


Lastly, add a subtle bottom border to the link Text Module.

  • Bottom Border Width: 1px
  • Bottom Border Color: #333333

download-5-free-border-images-for-divi-9 Theme Builder Layout

Add Description Text Module to Column 2

Text Settings

The second column needs a description Text Module only. After adding content to the content box, apply the following text settings:

  • Text Size: 22px (Desktop), 20px (Tablet), 18px (Phone)
  • Text Line Height: 2.6em
  • Text Orientation: Justify

download-5-free-border-images-for-divi-10 Theme Builder Layout


Make the Sizing settings match different screen sizes as well:

  • Width: 82% (Desktop), 100% (Tablet & Phone)

download-5-free-border-images-for-divi-11 Theme Builder Layout


And lastly, add some top and bottom margin.

  • Top Margin: 100px
  • Bottom Margin: 100px

download-5-free-border-images-for-divi-12 Theme Builder Layout

Adding the Border Shapes

Left Border Background Settings

Now that we’ve completed the overall design, we can start adding the border images! We’ll start off with the left border side. Find your border image of choice in the ‘Left Border’ folder and upload it as the section background image. Then, apply the following background image settings:

  • Background Image Size: Actual Size
  • Background Image Position: Center Left
  • Background Image Repeat: No Repeat

download-5-free-border-images-for-divi-13 Theme Builder Layout

Right Border Background Settings

Or, you can find your border image of choice in the ‘Right Border’ folder and add it as the section background using the following settings:

  • Background Image Size: Actual Size
  • Background Image Position: Center Right
  • Background Image Repeat: No Repeat

download-5-free-border-images-for-divi-14 Theme Builder Layout

Top Border Background Settings

The same thing goes for the top border image, but instead, use the following background settings:

  • Background Image Size: Actual Size
  • Background Image Position: Top Center
  • Background Image Repeat: No Repeat

download-5-free-border-images-for-divi-15 Theme Builder Layout

Bottom Border Background Settings

Or, last but not least, you can find the bottom border images in the ‘Bottom Border’ folder and combine it with these section background settings:

  • Background Image Size: Actual Size
  • Background Image Position: Bottom Center
  • Background Image Repeat: No Repeat

download-5-free-border-images-for-divi-16 Theme Builder Layout

Blend Colors Using Semitransparent Overlay

For each one of the included border shapes, you can decide to add a color overlay as well. This overlay helps you make the border images look more subtle. To add an overlay, go to your section settings and add a gradient background on top of the border background image.

  • Color 1: #ffffff
  • Color 2: rgba(255,255,255,0.36)
  • Gradient Direction: 141deg
  • Place Gradient Above Background Image: Yes

download-5-free-border-images-for-divi-17 Theme Builder Layout


Now that we’ve gone through all the steps, let’s take a final look at some potential designs you can achieve using these free border images.

download-5-free-border-images-for-divi Theme Builder Layout

Final Thoughts

In this post, we’ve shared 5 different border images which you can download for free. You can use these border images for any website you’re working on without any restrictions. We encourage you to try all of them out and create stunning designs. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

By Donjete Vuniqi

Donjetë is a freelance content writer who is fascinated by content marketing, design, and technology. She helps clients bring the right content to the right people. If you’re looking for someone to help you tell your company’s story, she’ll know how to handle it.

Share this article:

eHost-square-ad Theme Builder Layout

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:


Related Posts

gutenberg-one-year-later Theme Builder Layout

Gutenberg: One Year Later

As we quickly head into the final weeks of 2019, we also pass the first anniversary of WordPress 5.0 and, subsequently, Gutenberg coming headlong into our lives. Love it or hate it, Gutenberg is here to stay. If you had asked my thoughts on it last December, I would...

initial-documentation-for-block-based-wordpress-themes-proposed Theme Builder Layout

Initial Documentation for Block-Based WordPress Themes Proposed

In a pull request on the Gutenberg repository yesterday, Riad Benguella created an initial document that outlines how block-based WordPress themes might work. While the document is merely a starting point for the conversation, it is a set of ideas that will likely...

Get ALL Your SEO, WordPress & Divi News

Join Our Daily Roundup

SEO News and More

SEO News and More

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.