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.

To make a rounded image you can use border-radius trick. In this process, you can easily make an uploaded image round to use in the web without any touch of PHOTOSHOP.

So, let’s proceed-

The way to make image rounded or circular

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

China-rose Now do the followings-
  • Style img element with border-radius: 50%.
  • Set width and height to the same value, say, width:100px and height:100px. That’s all.
Now put the plan in action-

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

China-rose
WOW!!!

Leave a Reply

Your email address will not be published. Required fields are marked *