How to Create a Circular Image using CSS?

Article By Digamber Rawat on
CSS circle images topic will be dealt with in this article. Are you looking for a way to create those fancy circular images without having to edit them in Photoshop? If you have no clue what we are referring to, then have a look below. As you can see, there is nothing complicated about this.

css circle image

We are going to get started with basic CSS & HTML here. Here I suppose that you know how to create a blank HTML file and link a stylesheet in it. Here is the code for CSS circle image.

<div class="round-image"></div>

We are going to come up with a basic style for round-image class.

.round-image {
 width: 250px;
 height: 250px;
 background-image: url('https://d3iw72m71ie81c.cloudfront.net/female-20.jpeg');
 background-size: cover;
 display: block;
}

You might not be familiar with the line 5, I suppose. Well, but it is the mostly used CSS3 property. Thanks to this property, you will be able to play with the dimensions of the background. You will be able to set the height and width by entering the exact pixel values/percentage. You may also make the background cover which can be used to fit the whole container. We would recommend you to check background-size documentation for more information.

How to make things rounded?

At present, we have fitted the image in our square container. Now we are going to turn it into a circular frame by making some adjustments in the CSS code. We will be using the border-radius property here for the same.

This property allows us to round the corners of the elements. In order to turn our image circular using CSS, we have to provide values, which are going to be half of the values of the image size. Let’s have a look at the altered CSS below:

.round-image {
 width: 250px;
 height: 250px;
 background-image: url('https://d3iw72m71ie81c.cloudfront.net/female-20.jpeg');
 background-size: cover;
 display: block;
 border-radius: 125px;
 -webkit-border-radius: 125px;
 -moz-border-radius: 125px;
}

That’s it! We have successfully created a circular image! You didn’t have to rely on Photoshop at all thanks to the new CSS properties!

Further extensions for CSS circle image

If you had a chance to look at the documentation links we have provided, you will already be aware of the fact that corners of the images can be manipulated in non-symmetrical way. We have explained the same in the following CSS code:

.round-image {
 width: 250px;
 height: 250px;
 background-image: url('https://d3iw72m71ie81c.cloudfront.net/female-20.jpeg');
 background-size: cover;
 display: block;
 border-top-left-radius: 125px;
 -webkit-border-top-left-radius: 125px;
 -moz-border-top-left-radius: 125px;
 border-bottom-right-radius: 125px;
 -webkit-border-bottom-right-radius: 125px;
 -moz-border-bottom-right-radius: 125px;
}

If you wish to have a look at the output of this tutorial, you may visit this codepen page.

Digamber Rawat

Feel free to contact me, If you are looking for a freelance full stack Developer, with the following skills: Mongo DB, Express JS, Angualr 2+, Node JS, Loopback JS, Firebase, Ionic Framework and WordPress. I also offer remote contracting service to the clients across the globe. Hire Me