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