How to Create Beautiful Image Borders

Today, we are going to show two ways to create some cool. We are going to explain how to do eight different samples.  

Gradient Background

First of all, we will create images borders using gradient background only.



Content Tab

Here, you will add the color and set up how you want the border to look.   

Design Tab

Then, you will add the padding to the images. This is the last step. On the spacing, custom the padding value with 15px or any value that you prefer to top, bottom, right, and left padding.



Content Tab

Same as the first sample, add the color and all other values. Note: I use this color rgba(255,255,255,0) on the first color section.  

Design Tab

Go to the spacing area in design and type 15px or any value that you would like on custom padding right and left space. 

One Corner

 Content Tab

For the one corner, you will need the following setting. Note: the second color is rgba(41,196,169,0).  

Desing Tab

On the spacing section, add 25px or any value on the custom padding section. 

Imagen Border and Gradient Background

On this section, we are going how to mix gradient background with images borders.


Subtle Gradient

Content Tab

Go to the background section and do the following steps. Note: add rgba(255,255,255,0) for the first section of color.

Design Tab

Go to the design tab and add the next settings. 

Also, add the following values on the custom adding section.


Content Tab

The following settings are for the border of this image.

Design Tab

After adding all content settings, go to the design tab and insert the next values. 

Then, scroll down and add those on the border section.

Double Border

Content Tab

The background colors and setting that we used are the following.

Design Tab

First, go to the spacing section and add the next values.

Then, go to the border are and insert those values.

Triangle Corners

Content Tab

To create this border just add the next value to the background area. 

Design Tab

On this tab, add the following values in the border area. 

Pattern and Gradient Background

This is our last section of images borders. Here, we are going to use pattern and gradient background at the same time.


Content Tab

For this our last example, we did the next gradient background settings.

Also, add an image that you would like to add to the background of the border.

Desing Tab

the last step is to add the following values to the custom padding area in the spacing section.

In this post, we showed different ways to add borders to your images. We hope it was helpful. Let us know below if you have any comments or questions; we’d love to hear from you.