Displaying Corner Borders on Divi Images

Toy 01
Easily highlight your images with this corner borders effect!

Follow these steps to create this eye-catching effect by showing corner borders on your images, permanently or just on hover!

Image Module

PREVIEW:

Toy 01

1. Corner Borders

Toy 01

2. Corner Borders on Hover

1. Corner Borders

To create this effect on the Divi Image module, we’ll add a background with linear gradients to the module and slightly shrink the image by adding padding around it.

Paste this into Image → Advanced → Custom CSS → Main Element:
padding: 30px;
background:
	linear-gradient(#000000, #000000) top left, 
	linear-gradient(#000000, #000000) top left,
	linear-gradient(#000000, #000000) top right,
	linear-gradient(#000000, #000000) top right,
	linear-gradient(#000000, #000000) bottom left,
	linear-gradient(#000000, #000000) bottom left,
	linear-gradient(#000000, #000000) bottom right,
	linear-gradient(#000000, #000000) bottom right;
background-size: 5px 30px, 30px 5px;
background-repeat: no-repeat;

Adjust the values to your liking:

padding: sets the distance between the image and the corner borders.
#000000: choose any color you like.
background-size: tweak the length and thickness of the borders.

2. Corner Borders on Hover

It’s the same effect described earlier, except this time we’ll apply the background (the 4 corner borders) only to the Image’s Hover state, using the Hover Options provided by Divi. So, once you activate them from the Image > Advanced > Custom CSS > Main Element field (click on the ‘Hover Options’ icon) paste this:

Image → Advanced → Custom CSS → Main Element (DESKTOP):
padding: 30px;
Image → Advanced → Custom CSS → Main Element (HOVER):
background:
	linear-gradient(#000000, #000000) top left, 
	linear-gradient(#000000, #000000) top left,
	linear-gradient(#000000, #000000) top right,
	linear-gradient(#000000, #000000) top right,
	linear-gradient(#000000, #000000) bottom left,
	linear-gradient(#000000, #000000) bottom left,
	linear-gradient(#000000, #000000) bottom right,
	linear-gradient(#000000, #000000) bottom right;
background-size: 5px 30px, 30px 5px;
background-repeat: no-repeat;

Adjust the values to your liking:

padding: sets the distance between the image and the corner borders.
#000000: choose any color you like.
background-size: tweak the length and thickness of the borders.

🥳 That’s it!

DonDivi Gallery Module

The DonDivi Gallery module is included in the DonDivi Builder plugin. And while it already comes with tons of awesome built-in effects, we’ll show you how to also apply this corner borders effect to its images on hover!

PREVIEW:

Paste this into DonDivi Gallery → Advanced → CSS Class:
corner-borders

By assigning this CSS Class only to the module you want to modify, you will prevent these styles from being applied to other modules on the same page.

Paste this into Page Settings → Advanced → Custom CSS:
.corner-borders .ddb-gallery-item {
padding: 15px;
}
.corner-borders .ddb-gallery-item:hover {
background:
	linear-gradient(#000000, #000000) top left, 
	linear-gradient(#000000, #000000) top left,
	linear-gradient(#000000, #000000) top right,
	linear-gradient(#000000, #000000) top right,
	linear-gradient(#000000, #000000) bottom left,
	linear-gradient(#000000, #000000) bottom left,
	linear-gradient(#000000, #000000) bottom right,
	linear-gradient(#000000, #000000) bottom right;
background-size: 3px 20px, 20px 3px;
background-repeat: no-repeat;
}

Adjust the values to your liking:

padding: sets the distance between the image and the corner borders.
#000000: choose any color you like.
background-size: tweak the length and thickness of the borders.

🥳 That’s it!

DonDivi Gallery - Icon

DonDivi Gallery

Enjoy the ultimate Image Gallery experience in one single module!

👉 Subscribe to our YouTube channel

More Videos