In this tutorial I am going to share little CSS code snippet to make rounded avatar or profile picture describe. Using together surrounded by css you can easily skillful to convert square image into round / rounded image. and make profile describe considering google+. The script written in purely CSS no subsidiary CSS or Jquery plugin required. So that you can easily copy stick considering CSS+HTML snippet and create 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 be adjacent to-radius properties in CSS you can easily create any image rounded.This is the precise 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.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.