Make a circular image on Divi in 60 seconds

Circular images add a polished feel to a website, and they work especially great with pictures of peoples’ faces – for instance, I can turn this:

Screen Shot 2016-02-11 at 1.36.09 PM

Into this:

Screen Shot 2016-02-11 at 1.34.18 PM

Here’s how to achieve this effect with CSS:

1. Crop your image to be a perfect square. The width should equal the height.

2. Add it to an image module, and assign the module the custom CSS class circular.

3. Add this CSS to your website:

/* Round images */
.circular img {
 border-radius: 50%;
}

4. Set off some fireworks, buy a yacht, or start proposing to random people on the sidewalk. Do something extravagant – the world is now your oyster. Who would’ve thought it was this easy?

Hello there, Divi designer!

Designing can be tough, but you can make it easier. Receive four free emails on eliminating stress, using Divi's magical powers to work smarter, raising your rates, and automating the administrative dullness in your practice so you can focus on doing what you love.

Sign Up