Skip to main content

How to Remove Borders from Blogger Image?


Image with and Without Borders


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. 



How to Add Custom CSS in Blogger Template
Add Custom CSS Option in Blogger Blog

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


Comments

  1. Replies
    1. Thanks for the comment but sounds like a spam. Please make sure your comment is relevant.

      Delete
  2. Thank you so much for the info! That border annoyed me so much!

    ReplyDelete
    Replies
    1. If you continue visiting this site, I promise you will get solution to many other annoying problems! :)

      Stay in touch.

      Delete
  3. Thanks for help!

    ReplyDelete
  4. Excellent, thanks so much for doing this Abdur.
    Can you tell me how to do this for 1 picture only?. On my blog, I actually like the thin border, I have a black background template and most of my images are on the moody/dark side, so the thin red pic border actually looks good, but I wanted to put in a paragraph separator and make it look like a floating design, with the border on it, it doesn't.

    Thanks in advance

    Murph.
    www.wherethehellismurph.com

    PS, I'd be interested in seeing how muc you would charge for a re-design of my blog, I do my best, but it ain't easy :-)

    ReplyDelete
    Replies
    1. What a dangerous look of your site is! ;)

      Plz change the background first. Black gives pain to the visitors' eyes. Actually I'm not a web designer. So can't give any solution right now. Sorry . . .

      Delete
  5. Works!!! And as easy as a 1,2,3!!

    Thnks!!

    ReplyDelete
  6. This code doesn't work on my blog :( Any help would be appreciated

    ReplyDelete
    Replies
    1. If you're using Blogger's own templates then I would like to say- try again following all steps properly.

      If you're using any third party template, then this code might not work properly. First make sure you're not missing something. Thanks for contacting us . . .

      Delete
  7. So how do you do this for a single image in a post?

    ReplyDelete
    Replies
    1. I don't have such code but if you use this one, it will affect all images - new and old - of your site. Thanks for being with Marks PC . . .

      Delete
  8. Hey there! I used the code in my CSS box but it doesn't seem to work.

    ReplyDelete
    Replies
    1. Okay let me check your site. Share your URL . . .

      Delete
  9. Replies
    1. Try again and follow the steps properly. And share your site plz . . .

      Delete
  10. Hi, It is not working in my blog pcprank.blogspot.com

    ReplyDelete

Post a Comment

Popular posts from this blog

GTA San Andreas Cheat Code (PDF)

After Vice City, San Andreas is the most popular game released by Grand Theft Auto (GTA). Usually GTA releases role playing game. San Andreas is such a game where you can act like a person. You can do everything. You have to take part in missions and complete them.  To make your missions easier, there are lots of cheat codes. If you can properly apply these codes, the tough parts of the game will be easier. Cheat codes are somewhat like keyboard shortcuts of computer programs.  I've shared 63 cheat codes below. There were more cheat codes in my collection, but I've omitted the less important cheats. Effects or result of the cheats are on the left side, and the codes are on the right side.  You can copy the following codes in your PC. And for your convenience, I've also uploaded a PDF file of these codes. You will find the download link at the bottom.  Effect Cheat Code Adrenaline Mode MUNASEF All Cars Explode ALL...

Office 2016 Activator (KMSPico 10.1.5)

It's been couple of months after the release of final version of Microsoft Office 2016. And maybe you're tired of finding for a working activator for this version. Today I'm gonna share Office 2016 activator with you - no more waiting!! About the Activator   Name: KMSPico 10.1.5 File Size: 3 MB (Approx) File Type: Zipped Folder 100% Neat & Clean - No virus! Activating Capacity . . . KMSPico 10.1.5 is successfully leading the KMS world for last few months. If everything is okay, success rate is 100%. This tool has been tested and verified by Marks PC Solution. With this tool, you can activate -  Office 2016, 2013 & 2010 Windows 10, 8.1 & 8 Hopefully this version will work for both 32 bit & 64 bit versions of Windows. Installing Office 2016 Collect/ Download Office 2016 Professional Plus from Microsoft or somewhere else. Install it as trial version without any key. Use the follow...

Rules for Bengali Typing in PDF (Bijoy Layout)

Bijoy is the most popular layout for Bangla typing. The layout was developed by Mostafa Jabbar. He is the pioneer of Bangla typing in computer. More than 90% people use his Bijoy layout for Bangla typing. Today, I'm gonna share a PDF file with you that contains the Bijoy Keyboard layout with English fonts! If your keyboard doesn't have bengali fonts then you can print this PDF file to know where the bengali fonts are located in your keyboard. Additionally this file contains all the necessary rules and tips which are essential for Bangla Typing.  Now there are many other software available for Bangla Typing Layout. Such as Avro Easy, Unicode, Unibijoy etc. And there rules are also somewhat different from Bijoy. And some of their layouts follow the same rules like Bijoy. Hopefully this PDF file will support most of the rules when a layout is similar to Bijoy Layout.  Click to enlarge the image Download the PDF file from the button below. Follow...