How to Create Circled Images with CSS

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


  • Valentin Garcia

    Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

0 0 votes
Blog Rating
Notify of
Newest Most Voted
Inline Feedbacks
View all comments
Matthew Heinke

good stuff, always like to see people doing articles on the basics!


Hi @matthewheinke ,

I’m glad you like the tutorial 🙂

Mark Conroy

CSS “outside-shape” property will be very interesting if accepted in the CSS spec.


shape-outside: circle();
I like it 🙂
Thanks for the link, Mark


worked like a charm.. thanks for the info.


Great, thanks Ranay

Dan Knauss

You don’t really need to use the extra browser prefixes anymore: [url=]…[/url]

Remesh Kumar

It doesn’t work if the image is not a square. 🙁


Yes, you do need to prepare your images beforehand


I tried it on a rectangular image and, in chrome at least, it came out an oval.


Thanks and love it. It will be nice if you also include mouse hover css effect 🙂

Would love your thoughts, please comment.x