CSS – Make a rounded image with the help of CSS3

Here is a simple method to create a circular effect on an image with the use of CSS3. As an example, I’ll use the image below with basic html code and CSS:

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

I’ll now add style for the class “img-circular”:

.img-circular{
width: 300px; 
height: 300px; 
background-image: url('http://michaelsavin.com/wp-content/uploads/2014/09/new_image.jpg');
background-size: cover; 
display: block; 
}

The background-size is a new CSS3 property which lets you manipulate dimensions of a background. You can find more info here. To make the image circular (rounded) we’ll add the border-radius property to our CSS class which essentially lets us round the corners of al element. To create a perfect circle you’ll need to use values which are half the initial image size values. More info on border radius can be found here. Your new property will look like this:

border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px; 

And your new class will therefore look like this:

.img-circular{
width: 300px; 
height: 300px; 
background-image: url('http://michaelsavin.com/wp-content/uploads/2014/09/new_image.jpg');
background-size: cover; 
display: block; 
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px; 
}

As a result of using the border-radius property, your image will be perfectly rounded with the minimal effort. It’s worth adding at this point that you can creatively manipulate the radius of your corners to give it any shape you wish.