In this tutorial you will learn on how to create a rounded image in CSS3. We will use CSS property called border-radius to create this rounded image effect. One of the criteria to make a perfect rounded image is the image need to have the same height and width dimension. Otherwise, it will not create a perfect rounded image.

So what would happen if you do not have the same width and height dimension? Well, you can manually set the width and height of the image to be the same. Once the dimension has been set, it should be good enough to go.

Let's get started with the front end code first. We will use the image of our tutorial logo for this example. As you can see the below image does not have the same dimension size.

We then make a small change on the code by adding a class tag attribute into the image. We will set the css class name as rounded-img. Here is the full html code.

<img class="rounded-img" src="https://bytutorial.com/assets/listingimages/599/1143_css-3-border-radius.jpg"/>

The rounded-img css class will be defined into our css style below.

<style>
	.rounded-img{
		width:100px;
		height:100px;
		border-radius:50%;
	}
</style>

You can see the demo of the rounded image below. Pretty easy right?