How to create rounded profile picture using pure CSS

by

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.

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.

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


DEMO – Rounded images using pure CSS





Published by Rohit