Apr 27, 2020 | WordPress

How to create gradient borders in Divi with examples

Divi provides multiple modules in its page builder to design better websites. And each module comes with the border design option. However, this option only allows users to create color borders. If you want gradient borders for almost every element then this post from Elegant Themes, won’t help. Therefore, I’m going to share CSS snippet that can help you to create gradient borders, not in Divi but everywhere.

Let’s create some gradient borders, easy!

Create gradient borders in the Divi theme

To add gradient border on a particular module, go to its Advanced tab, and inside Custom CSS >> Main Element settings add below CSS.

 

border-image-slice: 1 !important;
border: 10px solid;
border-image-source: linear-gradient(90deg,#F92C7A 0%,#e1db18 100%) !important;

You can change the border size and gradient accordingly.

Gradient borders examples

Below are some examples of the gradient borders created around Image, CTA, and Blurb module using the same CSS snippet.

Human Creativity

Creativity doesn’t wait for that perfect moment. It fashions its own perfect moments out of ordinary ones.

WordPress

WordPress is the most popular CMS on internet. It is third most used technology for web development the popularity of WordPress based on.

Future Technology

It has become appallingly obvious that our technology has exceeded our humanity.

Artificial Intelligence

Humane technology starts with an honest appraisal of human nature. We need to do the uncomfortable thing of looking more closely at ourselves.

You can also use this CSS snippet to add a gradient border outside the Divi theme interface. To accomplish that, all you have to do is assign a class to the element, and write above CSS into that class.

Summary

Above, I’ve shown you how you can create gradient borders for Images, CTA, and Blurbs using the CSS mentioned in this post. Similarly, you can also create gradient borders for other elements of the Divi theme.

If you got any views regarding this post or how to gradient borders other than this method, then share them in the comment section. And don’t forget to subscribe to our newsletter to receive the latest updates about Divi customization and our premium products.

Posted By:
Karan
Karan loves making web beautiful with his keen eyes toward design.

3 Comments

  1. Clim

    A while ago I was still searching for a long time on how to make these gradient borders.
    Unfortunately that function is not standard in Divi.
    Thank you 👍🏼!

    Reply
  2. Roisin O'Flaherty

    Hey this is a great tutorial and it is actually working for me!

    Is there a way to add border-radius to the border?

    Reply
    • Karan

      You could try the below CSS.

      border: double 10px transparent;
      border-radius: 30px;
      background-image: linear-gradient(white, white), linear-gradient(90deg,#F92C7A 0%,#e1db18 100%) !important;
      background-origin: border-box;
      background-clip: content-box, border-box;

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

3 Comments

  1. Clim

    A while ago I was still searching for a long time on how to make these gradient borders.
    Unfortunately that function is not standard in Divi.
    Thank you 👍🏼!

    Reply
  2. Roisin O'Flaherty

    Hey this is a great tutorial and it is actually working for me!

    Is there a way to add border-radius to the border?

    Reply
    • Karan

      You could try the below CSS.

      border: double 10px transparent;
      border-radius: 30px;
      background-image: linear-gradient(white, white), linear-gradient(90deg,#F92C7A 0%,#e1db18 100%) !important;
      background-origin: border-box;
      background-clip: content-box, border-box;

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Using Divi for RTL Website? Here Are 3 Things You Need To Know

Using Divi for RTL Website? Here Are 3 Things You Need To Know

Running a website for the business is one of the crucial aspects of running a business in today’s time. Whether you’re manufacturing fashion apparel or designing web projects, an online platform is always a plus. Based on this, more and more businesses are adopting...

An Amazing Guide on Divi Scroll Effects & How to Use Them Creatively

An Amazing Guide on Divi Scroll Effects & How to Use Them Creatively

Divi Scroll Effects are a great way to turn a simple Divi website into a modern one. And not only modern but highly interactive with enhanced engagement for different areas of the site. You could highlight CTAs, content sections and hook users to the purpose you've...

7 Easy Steps To Create Popups for Divi With Divi Modal Popup

7 Easy Steps To Create Popups for Divi With Divi Modal Popup

Popups can help you do many beneficial things on your site. For example, showing discount coupons, sales, announcements and much more. With them, you could easily boost interaction on your site and turn more leads into conversion. Therefore, if you're looking for a...

Popular on Divi Extended

Divi Plus Divi Child Theme Divi Header Layouts