Round avatar with CSS3

gistfile1.scss

/* Configure by modifying variables:
     $round-width: size of round avatar
     $avatar-image: image path of ravatar
*/
div.round-avatar{
  $round-border-size: 5px;
  $round-border-color: #fff;
  $round-width: 100px;
  $round-height: $round-width;
  $avatar-image: url('//goo.gl/Nw9pE2');
  margin: 0 auto;
  width: $round-width;
  height: $round-height;
  position: relative;
  border-radius: 50%;
  background: $round-border-color;
  &:before {
    content: '';
    border-radius: 50%;
    position: absolute;
    width: $round-width - ($round-border-size * 2);
    height: $round-height - ($round-border-size * 2);
    top: $round-border-size;
    left: $round-border-size;
    background: $avatar-image no-repeat center;
    background-size: 100%;
  }
}