Create Image Circles using CSS

I recently started learning the basics of CSS3 features that you can use to create animations.

One of the simple CSS3 technique that many websites use on their comment section and headder section is to display the user’s photo and images in a circle.

To create an image cricle in CSS you have to change the border radius property

Take a sample image and create a CSS class for it. it's very simple...

• HTML

1:  ------HTML-------------------------  
2:  <div class="circle">  
3:       <img src="viren.jpg"/>  
4:  </div>  
5:  -------CSS-----------------------  
6:  .circle img{  
7:    height:300px;  
8:    width:300px;  
9:    border-radius:250px;  
10:  }  

Give border shadow to image circle..

1:  ------HTML-------------------------  
2:  <div class="circle">  
3:       <img src="viren.jpg"/>  
4:  </div>  
5:  -------CSS-----------------------  
6:  .circle img{  
7:    height:300px;  
8:    width:300px;  
9:    border-radius:250px;  
10:    box-shadow: 0 0 18px blue;  
11:  }  

Change Effect on mouse hover :

1:  ------HTML-------------------------  
2:  <div class="circle">  
3:       <img src="viren.jpg"/>  
4:  </div>  
5:  -------CSS-----------------------  
6:  .circle img{  
7:    height:300px;  
8:    width:300px;  
9:    border-radius:250px;  
10:    box-shadow: 0 0 18px blue;  
11:  }  
12:  .circle img:hover {  
13:    border-radius:0px;  
14:    -webkit-transition: all 0.3s ease-out;  
15:  }  

Result :