How To Delete the faint line / grey box around Pictures in Blogger

I have just taken part in tonight's #bbloggers chat on Twitter which was on the subject of HMTL/blog layouts. You may have noticed that today I have been tweaking my blog layout and making some slight changes. Thanks to help from Maria you can now view all the giveaways in the tab bar below the blog title and I now have a review tab so you can easily see all product reviews. I am slowly going through my blog archive to check that all my reviews have been tagged correctly!  


Since Blogger made changes I've been trying to work out how to get rid of those annoying faint grey lines around my pictures! After some guidance tonight on the #bbloggers chat I have now removed them. I had a number of tweets asking for help so thought I would quickly post how I did it to help you!


If you are using the new Blogger Interface (not dynamic views):


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

?

1 2 3 4 5 6 7 8 9

.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; }

Ta da! The boxes around your photos should have disappeared! If you have any other suggestions as to how I can improve my layout then feel free to comment below.

Hope this is helpful to everyone!