How to make a circular image with CSS only

By: Unknown on 11:40 PM

Share it Please

Tweet

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 my profile image 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.