Make Rounded Images With CSS Shadows

Today, I will tell you how to change any rectangular image into rounded shape with CSS drop shadows and borders without editing the original images.This is very simple CSS trick.You can use this rounded image for display the author photos in your blog's sidebar or below post in author box.You can adjust width and height  based on the size of the profile photo.Let's start the tutorial now:-

See Also - How To Add Beautiful CSS3 Buttons To Blogger Blog

Demo Here

Add To Blogger

• Go to Dashboard > Design > Page Elements.
• Click Add A Gadget. In window, select HTML/Javascript .
• Copy the code below and paste it inside the box.
• Save The Gadget

Add To WordPress

• Go to Dashboard > Appearance > Widgets > Available Widgets
• Drag Text Widget Into a Sidebar.
• Paste In The Code.
• Save Widget & Its Done

Remember Notes

• Replace the background-image URL in the DIV with your own picture. 
• 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('https://lh4.googleusercontent.com/-wVsJ5TO9IJo/AAAAAAAAAAI/AAAAAAAAC2E/f-QShaCQ8bg/s250-c-k/photo.jpg')">
</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>