You can take any rectangular image and apply the following CSS style to transform that image into a circular one with drop shadows and borders without editing the original images.

To get started, simple replace the background-image URL in the DIV with your own image. Perfect for display the author photos in your blog’s sidebar. The height and width attributes of the .circle class may have to be adjusted based on the size of the profile image.

<div
  class="circle"
  style="background-image:
       url('img_url_here')"
></div>

<style>
  .circle {
    display: block;
    width: 150px;
    height: 150px;
    margin: 1em auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-border-radius: 99em;
    -moz-border-radius: 99em;
    border-radius: 99em;
    border: 5px solid #eee;
    box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
  }
</style>