How to make a rounded or circular image with CSS

If you work in web publication platform, you must be working with image. Rounded image has a special appeal to all in this case. We can apply width and height property with img element and thus control its shape in length and breadth.

But how to shape an image round? Whatever the answer, it is clear that we cannot produce a circular image, at least, with width and height property.

The way to make image rounded or circular

First, have a look at the original image measuring width:200px and height:250px–

• Style img element with border-radius: 50%.
• Set width and height to the same value, say, width:100px and height:100px. That’s all.

Code

<img src="https://www.netplanter.com/wp-content/uploads/2020/01/CHINA-ROSE-1.jpg" 
alt="China-rose" 
style="border-radius:50%;
width:150px;
height:150px;">

Result