How to Create Circled Images with CSS

One of our members wanted to display circled images in his website.

In this tutorial, I’m going to show you how to use CSS to get the desired result.

Step #1. Get your images ready

To create the effect, make sure your images are square and all have the same width and height like the example below. Use Photoshop or GIMP to crop your images, if needed.

Step #2. Add the HTML

Add this sample code into your site:

<img class="circle" src="path/to/your/image.jpg">

Note, we are using the circle class for that image.

Step #3. Add the CSS

Load the CSS code below into your site:

.circle {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
}

• If you’re using Joomla, you can use an extension to add the CSS.
• For WordPress, there is a plugin.
• For Drupal, add it in one of the CSS files from /sites/all/themes/your-theme/css/

Step #4. Check the end result

Go to the front of your site and confirm that the circle effect is working: