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

HTML

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

<img class="round" src="http://placeimg.com/120/120/people" >
<img class="round" src="http://placeimg.com/120/120/animals">
<img class="round" src="http://placeimg.com/120/120/sport">

CSS

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.

<style>
.round {
  border-radius: 50%;
  margin: 10px;
}
</style>

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


DEMO – Rounded images using pure CSS