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:

{codecitation}<img class=”circle” src=”path/to/your/image.jpg”>{/codecitation}

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

Step #3. Add the CSS

Load the CSS code below into your site:

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

Step #4. Check the end result

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

circled girl

Instructor

  • 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
Subscribe
Notify of
11 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Matthew Heinke

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

htmgarcia

Hi @matthewheinke ,

I’m glad you like the tutorial 🙂
Regards

Mark Conroy

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

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

ranay-lozada

worked like a charm.. thanks for the info.

steve

Great, thanks Ranay

Dan Knauss

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

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

steve

Yes, you do need to prepare your images beforehand

gjcomber

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

siamnaulak

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