How to remove blogger Picture/Image shadow and border

If you want to get rid of those annoying shadows and borders around blogger images, then follow the next steps (see the difference in the screenshot below):

If you are using the Old Blogger Interface :

    Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.


If you are using the New Blogger Interface :

    Go to Dashboard - Template - Customize - Advanced - Add CSS - paste the following code    -Press enter after the last character of the last line } - Apply to Blog.

  
    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
    .BlogList .item-thumbnail img {
     padding: none !important;
     border: none !important;
     background: none !important;
     -moz-box-shadow: 0px 0px 0px transparent !important;
     -webkit-box-shadow: 0px 0px 0px transparent !important;
     box-shadow: 0px 0px 0px transparent !important;
}

Now your blogger images should appear without any border or shadow. Cheers!

Update :

If the above method doesn't work for you, do the following :

- Go to Blogger's Dashboard > Design (Layout) > Edit HTML
- Thick the "Expand widget templates" checkbox;
- Search (CTRL + F) for the following code:

       border: 1px solid $(image.border.color);

      -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
      -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
      box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
 

- Delete it and Save your template.