How to display circular images using CSS only

Maybe you are wondered how to display circular images on your website without the help of photoshop. But yes, it is possible to display circular images using CSS only, no photoshop or image editing is required. So, in this tutorial, I will show you how to display circular images using CSS only. Please, have look at the following HTML and CSS script. It is very simple and easy to understand.

How to display circular images using CSS only

HTML – Display Circular Images Using CSS

<img class="circular" src="images/sachin.jpg">
<img class="circular" src="images/sourav.jpg">
<img class="circular" src="images/dhoni.jpg">
<img class="circular" src="images/virat.jpg">

The above HTML code is very simple and straightforward. There are four images, and each one is assigned a class named circular.

CSS – Display Circular Images Using CSS

Let’s specify some CSS properties to the circular class.

.circular { 
   width:150px; 
   border-radius: 50%;
   border:1px solid #ccc; 
   padding:3px; 
   margin:10px;
}

By default, images are square or rectangular in size. By applying CSS property border-radius we convert images in the circular frame. We will set border-radius:50% so that the image frame will exactly look like a circle.

You can try the online demo by click on the below demo link. Please,  like and share this tutorial with others.

You may also like to read other articles —

Leave a Reply

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