z87nsq
Last Updated: January 21, 2017
·
82.62K
· kamilwysocki
Coderwall

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.

10 Responses
Add your response

11261
24995c2c67dda1af5851ba3f39f2c243

Thanks a lot. This helped me.

over 1 year ago ·
12442
Adaf0fcb7600a493ec8235f2160a1fc7

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 ·
12445
Coderwall

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

over 1 year ago ·
12455
Adaf0fcb7600a493ec8235f2160a1fc7

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

over 1 year ago ·
12612
41edc3c2d3bedb25f0391469a80a0717 normal

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

over 1 year ago ·
12630
Coderwall

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 ·
12673
Classy big

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 ·
16473
Wgfspn0o normal

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 ·
16476
Coderwall

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

over 1 year ago ·
18763
0 9nypji3tuljpk64cnkpij8 ym urt mcn9e j8ltqq73sfmgsturbhl7bdraakzmcbyg9f76srfa

Thank you so much!! =)

over 1 year ago ·