How to remove Border/Shadow from Blogger post images

You might have noticed in your blog that the images have a white border/shadow to it. If you do not want it (like I didn't want them) you can use this simple procedure to remove them completely from all blogger images.

Here is how you do it in two simple steps:

1. Go to your Blogger Dashboard --> Template --> Customize

2. Select Advanced --> Add CSS and add the following code and click Apply to Blog.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,

.BlogList .item-thumbnail img 

 {

  padding: 0 !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;

}

Technically you are setting the border to none and the shadow to transparent (with all metrics as 0px)

3. This is how your image would have looked like before.

4. After applying steps 1 and 2, you will end up with images like this:

So simple isn't it? Try this if you are annoyed with the white shadow/border like effect on the image and get this absolute border free clear and exact image you want for your posts and pages.

You can read the previous post of this series here: Custom Pin-it hover image for blogger images

Want more blogger tutorials? Visit here for the entire list.