How to Create Circle Images with CSS

In this tutorial, we will show you how to create circle images on your blog post or within your website using CSS. To do this, we will add a circle image class (from Bootstrap) and then apply the styling to a new image.

Note: In order for this to work correctly, you\’ll need to use or specify a square image and apply the CSS class to the image.

The images will look something like the Testimonials section from the DayFour Pro theme.

Creating Circle Images with CSS

First, simply add the following class to your theme\’s style.css file.

To display images with the new circle image class, add the class=\"img-circle\" to your images using the text editor. It\’s important to note that you\’ll need to start with a square image for this to display correctly.

Depending on your theme, the above example code will result in something that looks similar to this: