How to Remove Borders from Blogger Image?

Look at the two images above. Both of them are almost same. Except the second one has borders outside. The first one is transparent and it has no shadow or border. And the second one is transparent but there is a boudary outside of it. Which one do you like?  

If you are a regular visitor of Marks PC Solution, then you should notice our images has no borders. In fact no borders at present, previously out images has borders. Most of the time I like to use transparent image with PNG extension. And outside of each image, there was a border which looks very odd. But adding a CSS code removes this problem. 

Few days ago, one of my acquintances shared a code with me. He said this code removes the outside border of the uploaded images in blogger blog. I applied this code in Marks PC Solution. And magically there is no borders outside of my images. All images are now fully transparent! 

By default, blogger blogs automatically add borders and shadows outside of your uploaded images. In case of non-transparent images (maybe PNG, JPEG, GIF) it doesn't matter. But when you upload a transparent image with PNG format the borders look really odd. It affects the transparency of the image. Though blogger template designer allows you to change the shadows and borders of the images. But you can't fully remove the borders. 

Today I will show how can you fully get rid of your blogger images from borders. 

Well, this is not a tough job at all. All you need is just to add a CSS code in your blogger template. Then you will be able to see this magic. Okay let's start. 

1. Make sure you're signed in to your blogger account.
2. Go to the Admin Panel/ Design/ Dashboard or whatever you call it. 
3. Click on the Template button from the left pane.
4. Now hit on the Customize option.
5. At the left side you get a list. Select Advance from here. 
6. Now another list will appear. Drop down and choose Add CSS from that list. You can also take help of the image below.  
7. Now a box named Add Custom CSS will appear at the right side. 
8. Copy and paste the CSS code below in the Add Custom CSS box. 
9. You're almost done! Now hit on the Apply to Blog button from the top right corner. 
10. Done! Visit your blog and see the magic! 

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

}

There are 10 steps to do this task. Doesn't this process look very long? Okay I'm gonna shorten this! Just follow the simple way below: 

Template > Customize > Advance > Add CSS > Add Custom CSS Box (Copy and Paste the above code here) > Apply to Blog. 

Add Custom CSS Option in Blogger Blog

Stay with Marks PC Solution to get more interesting IT topics!