How to create rounded profile picture using pure CSS

In this tutorial I am going to share small CSS code snippet to create rounded avatar or profile picture. Using following css you can easily able to convert square image into circular / rounded image. and make profile picture like google+. The script written in purely CSS no additional CSS or Jquery plugin required. So that you can easily copy paste following CSS+HTML snippet and make images rounded.

Making rounded profile picture using pure CSS


These are the sample images you can use own images to display rounded pictures.

<img class="round" src="" >
<img class="round" src="">
<img class="round" src="">


Using border-radius properties in CSS you can easily make any image rounded.This is the exact same trick used by Bootstrap for making rounded images.

.round {
  border-radius: 50%;
  margin: 10px;

Above code works in pretty much every modern browser, But IE8 will still show square images.

DEMO – Rounded images using pure CSS