Turn Square Images Round and Sorta-Round

H ow can you make round images in Divi? Besides magic? Well, you just use some simple custom CSS (it’s funny how often customizing CSS is the answer on this website). So sit back, put your feet up and read about how easy it is to turn square images into circles. (see pictures below for example). And I will even show you how to round corners equally and not so equally that will result in some funky shapes.  And as I am wont to do sometimes, I have also created a video to go along with this tutorial on how to make round images in Divi (coming soon).

Example of square image turned into circle image.

The easiest way to accomplish the round image effect is to add a custom CSS class. You can either do this in your child’s theme style-sheet or using the Divi Theme Options panel or the Divi Theme Customizer panel. I do it through the child theme, just because that’s how I learned. You do it the way you are most comfortable. Although, I do suggest you create a child theme for customizing Divi (see this page for more info).

To start, create a custom CSS class called roundImage (you may name it whatever makes sense to you). Now, we want to take the corners and round them off. In order to accomplish this we need to set a border-radius. In the example above I create a full circle, which means each corner has a border radius of 50% (if I wanted to only round corners a bit, then I could make that number smaller, such as 25%).  Feel free to play with different numbers to see the different effects you can get. So here’s what we have so far (don’t stop reading, we’re not done).

.roundImage {
border-radius: 50%;
}

Now in order for it to apply to images, we need to tell the custom CSS class this is for images. And we do that through the img tag. So let’s add that after the class name but before the attributes, like this:

.roundImage img {
border-radius: 50%;
}

We’re almost done. Now, we need to apply it to our images. So whether you are using the image module, or people module, or text module … I’m not going to list all the modules here. Whatever module you’re using, you want to add roundImage (or whatever you named it) to the Custom CSS field found in the Advanced Tab. Notice, I did not put a period in front of roundImage. I find that’s the most common mistake people make (including me sometimes) when using the Custom CSS field.

Add Border and Drop Shadow to Round Image

“But wait a doggone minute!” you may be saying (probably not), “the example above has a border and a drop shadow.”  That’s because I wanted to show you how to do it first. Now let’s add a border and drop shadow.

.roundImage img {
border-radius: 50%;
border: 3px solid #666;
box-shadow: 2px 2px 10px 2px rgba(0,0,0,.5);
}

Feel free to change the variables to meet your needs. I did a tutorial on YouTube on adding a drop-shadow, so if the code above confuses you, you may want to check it out.

Multiple Radius in Images

Now, it’s time to start having fun. The above example showed you how to turn a square image into a circle. What if we only wanted to round 1 corner? Can we do that? Yep. How about 2 corners? Yep. How about— yep!  So when you just use border-radius and one number, that tells CSS that you want to change all corners equally. It works the same with margins, padding, etc. If you use two numbers, then the first number handles top-left and bottom-right equally, while the second number handles bottom-left and top-right equally equally. You can even use four numbers with each number representing one corner (border-radius: 25px 5px 30px 10px; /* top left, top right, bottom right, bottom left */). To further break it down, you can designate which border you want to target by using border-radius-top-right (use top / bottom and right / left). Here are some examples.

.roundImage2 img {border-top-right-radius: 50%;
border: 3px solid #666;
box-shadow: 2px 2px 10px 2px rgba(0,0,0,.5);}

.roundImage3 img {border-top-right-radius: 50%;
border-top-left-radius: 50% !important;
border: 3px solid #666;
box-shadow: 2px 2px 10px 2px rgba(0,0,0,.5);}

.roundImage4 img {border-radius: 50% 20%;
border: 3px solid #666;
box-shadow: 2px 2px 10px 2px rgba(0,0,0,.5);}

.roundImage5 img {border-radius: 0% 50%;
border: 3px solid #666;
box-shadow: 2px 2px 10px 2px rgba(0,0,0,.5);}

Corners Have Vertical and Horizontal Sides

I think the above is pretty straight forward, so now it’s time to throw a wrench into rounding off corners. Did you know that each corner has two sides to it? Yep, the top (horizontal) and side (vertical). This is where you can start making some funky shapes.

Now instead of using singular variables to represent each corner radius, we’ll use two variables separated by the slash. So, for instance if you want the horizontal portion to be perfectly round, but the vertical portion to only be a little round, you can do something like 50%/10%. If you are doing corners individually, you do not use the / in between.  It sounds confusing, but look at my examples below and I hope by seeing it in action it will explain it better than my typing can.

.roundImage6 img {border-radius: 5% / 50%;
border: 3px solid #666;
box-shadow: 2px 2px 10px 2px rgba(0,0,0,.5);}

.roundImage7 img {border-top-left-radius: 50% 10%;
border: 3px solid #666;
box-shadow: 2px 2px 10px 2px rgba(0,0,0,.5);}

.roundImage8 img {border-top-left-radius: 0%;
  border-top-right-radius: 10% 40%;
  border-bottom-left-radius: 40% 15%;
  border-bottom-right-radius: 20%;
border: 3px solid #666;
box-shadow: 2px 2px 10px 2px rgba(0,0,0,.5);}