How to create rounded profile picture using pure CSS

profile picture, CSS Interview Questions

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

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 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.

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

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

Leave a Reply