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.

girl

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

Author

  • 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
Article Rating
Subscribe
Notify of
guest

11 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Matthew Heinke
Matthew Heinke
8 years ago

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

htmgarcia
8 years ago
Reply to  Matthew Heinke

Hi @matthewheinke ,

I’m glad you like the tutorial 🙂
Regards

Mark Conroy
Mark Conroy
8 years ago

CSS “outside-shape” property will be very interesting if accepted in the CSS spec.
[url=http://alistapart.com/article/css-shapes-101]alistapart.com/article/css-…[/url]

steve
steve
8 years ago
Reply to  Mark Conroy

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

ranay-lozada
8 years ago

worked like a charm.. thanks for the info.

steve
steve
8 years ago
Reply to  Ranay Lozada

Great, thanks Ranay

Dan Knauss
Dan Knauss
8 years ago

You don’t really need to use the extra browser prefixes anymore: [url=http://caniuse.com/#feat=border-radius]http://caniuse.com/#feat=bo…[/url]

Remesh Kumar
Remesh Kumar
8 years ago

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

steve
steve
8 years ago
Reply to  Remesh Kumar

Yes, you do need to prepare your images beforehand

gjcomber
8 years ago
Reply to  Remesh Kumar

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

siamnaulak
siamnaulak
8 years ago

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

11
0
Would love your thoughts, please comment.x
()
x