*****I HAVE MOVED!*****
*****Find me here: sarahannrogers.com*****

Welcome! I'm so glad you've found your way here and hope you enjoy your time connecting.

Wednesday, July 21, 2010

Photo Tutorial

I promised you a tutorial on Monday on how to get the photos you post to have this border and shadow (not visible in Internet Explorer, but definitely in Chrome, Safari, and Firefox):
(Don't hate me because I'm beautiful...)

Anyway, this is so easy that I felt I had to share!  I was editing each of my photos to have a shadow before I uploaded, but it is so much easier now!

Step 1:
Go to the "Design" tab in blogger:

Click on "Edit HTML"

Step 2:
Scroll down under "Edit Template" and find ".post img" (most browsers allow you to press Ctrl + F or Command + F to find the specific wording).

Step 3:
Enter this text between the { and } after ".post img":

-webkit-box-shadow: rgba(0, 0, 0, 0.199219) 0px 0px 20px;
background: white;
border: 1px solid #CCC;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding: 8px;


Step 4:
Click "Save Template" and you're finished!


  • To change the sharpness/dullness of the corners, edit the numbers under: "border-bottom-left-radius," "border-bottom-right-radius," "border-top-left-radius," and ""border-top-right-radius."  Right now, the radius is at 5px, but if you make it 10px, the corners will be more rounded, and that continues as the number grows.
  • To change the white space between your image and the border/shadow, change the number under "padding."
  • To change the shadow size, change the number after "-webkit-box-shadow"that is currently "20px"


  • Do not change, delete, or move any of the colons or semicolons!
  • Do not seperate numbers from the "px" with a space!

If you have questions, leave them in your comment and I will email you back!


  1. Cute- I would do it but then it adds a border to my signature which kind of looks funny!

    Oh, and I'm using Internet Explorer and can see it :)

  2. thanks for the tutorial... i'll definitely be trying this one!!

  3. Thanks! How do you make your pictures so big?

  4. Thank you! I am intrigued :)

  5. thank you so much for posting this!! I just made the changes to my blog so I could have this great border around my pics! You're the best!!

  6. this is a fantastic tip! you are a genius!!! thanks pretty gal!


Your words make my heart smile.