Last Updated: October 31, 2023
·
243.6K
· kamilwysocki

How to make a circular image with CSS only

Ever wondered how to make those fancy circular images without the need to edit them in Photoshop? If you don't know what I'm talking about, see Scenewave. This is actually fairly simple. For the sake of this example, let's use Coca-Cola logo from here.

Basic code

Let's start with basic HTML and CSS for this (I'm assuming you can set up a blank HTML document and link a stylesheet to it).

<div class="img-circular"></div>

Let's set up a basic style for the class img-circular.

.img-circular{
 width: 200px;
 height: 200px;
 background-image: url('http://strawberry-fest.org/wp-content/uploads/2012/01/Coca-Cola-logo.jpg');
 background-size: cover;
 display: block;
}

The only thing, that you might not be familiar with, is the line 5. The background-size is a new CSS3 property, which enables to manipulate with the dimensions of the background. You can set it's width and height by entering exact pixel values, percentage, or make the background cover or make it fit whole container. Make sure you see the background-size documentation for more info.

Making things rounded

So now we have image, that fits our square container. Let's alter the CSS code to make circular frame. We will use border-radius property, which gives us opportunity to round the corners of element it's applied to. To make our image circular we have to use values, which are half of the image size values. Our CSS file now looks like this:

.img-circular{
 width: 200px;
 height: 200px;
 background-image: url('http://strawberry-fest.org/wp-content/uploads/2012/01/Coca-Cola-logo.jpg');
 background-size: cover;
 display: block;
 border-radius: 100px;
 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
}

And you're done! New CSS properties allow us to create effects which can save you precious minutes of Photoshopping.

Further extensions

If you carefully studied links to documentation I gave you (in case you missed it - check it out), you are perfectly aware, that you can manipulate the image's corners in non-symmetrical way. Try CSS code below. What happened?

.img-circular{
 width: 200px;
 height: 200px;
 background-image: url('http://strawberry-fest.org/wp-content/uploads/2012/01/Coca-Cola-logo.jpg');
 background-size: cover;
 display: block;
 border-top-left-radius: 100px;
 -webkit-border-top-left-radius: 100px;
 -moz-border-top-left-radius: 100px;
 border-bottom-right-radius: 100px;
 -webkit-border-bottom-right-radius: 100px;
 -moz-border-bottom-right-radius: 100px;
}

To see the effects of this tutorial visit this jsFiddle page.

12 Responses
Add your response

Thanks a lot. This helped me.

over 1 year ago ·

Thanks! By the way, is there any way to position the image so that it stays in center? Sorry for the silly question but I am still at the learning stage!

Edit: I think I got it. Changing display: block; to display: inline-block; does the job!

over 1 year ago ·

@ashutosh try adding background-position: center; to .img-circular class :)

over 1 year ago ·

@kamilwysocki I tried adding that but it doesn't change anything.

over 1 year ago ·

Thank you for this awesome tutorial. Could you please tell me how could I center-align this image?

over 1 year ago ·

Hey @sourav! Thank you. To center-align image add:
background-position: center; to .img-circular class.
See the fiddle here:
http://jsfiddle.net/ngzHh/

over 1 year ago ·

One might want to get in the habit of writing <strong>border-radius: 50%;</strong>, to make a circular element at any size (and without any math).

over 1 year ago ·

An even easier way to do this ... <b>if</b> you are just putting an image in the old fashioned way.. such as:

<a href="image.jpg"><img src="img_sm.jpg" /></a>

just add a new class to the img like so:

<a href="image.jpg"><img src="img_sm.jpg" class="rounded" /></a>

then add this extremely simple css (thx mikezarandona above for the percentage idea):

img.rounded { border-radius: 50%; }

done.

I made a fiddle as well using your coca cola image here: http://jsfiddle.net/WEYEp/

over 1 year ago ·

@davidsteenkamp That's cool, thanks for sharing! :)

over 1 year ago ·

Thank you so much!! =)

over 1 year ago ·

Thanks, that is exactly what I was looking for. And it actually works:)

over 1 year ago ·

Incredibly grateful. It is very useful

7 months ago ·