How to Create Circled Images with CSS

| Coding Tutorials
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%;

Step #4. Check the end result

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

circled girl

About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in our support forum.