How To Remove Border And Shadow Around Images On Blogger

33 comments
By default blogger shows border and shadow around images or photos of your blog post if you find this annoying and want to remove or delete it just follow the given tutorial with images :



how to remove border and shadow from blogger images main
how to remove border and shadow from blogger images

Steps : To remove border from blogger images


Step 1. Log in to your Blogger account, then go to Template > Edit HTML.


edit blogger template


Step 2. Click anywhere inside the code and search for following code ( CTRL+F ) :

]]></b:skin>

Step 3. Copy and paste the following code just above it :

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
  padding: 0px !important;
  background: none !important;
  border: 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;
}

Note: To remove border from mobile view goto Theme > Click on gear icon under mobile > Under 'Choose mobile theme' Select "Custom" and click Save.

Step 4. Save the Template.

That's it !

Now visitors of your blog will not see any border and shadow around your blog images. For any issues related to above tutorial comment below. Stay Updated, Browse Howbloggerz ! :)

33 comments:

  1. That doesn't work anymore. New solution, please :)

    ReplyDelete
    Replies
    1. Hi Mark
      Everything is fine from my end. Are you using custom Template? May be your template CSS are overriding the provided values.

      Delete
    2. It worked for me just today. Thanks so much!

      Delete
  2. Fan_tas_tic, it actually worked for me. I don't know what Mark's doing. I assumed I needed to put it on a new line and so added one at 580. Maybe he tagged it on to the bracket and it made a difference?

    ReplyDelete
    Replies
    1. Hi Don
      Actually, New Line doesn't matter too much in coding, but it is necessary to add code to the right place because a single piece of misplaced code can affect your template.

      Suggestion: Always backup your template before making any changes so that you can easily revert back if something wrong happens.

      Delete
  3. Thanks for this handy tip. I entered the code in the Custom CSS box (in the advanced section of the template customiser and it worked fine.

    ReplyDelete
    Replies
    1. Hi SWJ
      I am happy to hear that, this trick worked for you.
      Yes, You can also add the given CSS in Custom CSS box of Template Customiser.
      I will update my posts :)

      Delete
  4. Can you make a tutorial on how to remove shadow from a particular image?
    I tried it by putting style="border:none;", still I the shadow not just leaving.

    ReplyDelete
    Replies
    1. Hi Durbar Ghosh

      Yes, I am definitely going to create a tutorial on this topic :)
      Setting border style to none is not going to work because the shadow around images is not due to border its actually due to "Shadow code" so, instead of setting border:none; add box-shadow: 0px 0px 0px transparent !important; to that particular image.

      I hope this will help you.
      Happy blogging.

      Delete
    2. After a lot of search I found that code in W3schools CSS section. Yet, thanks a lot for the reply. Your articles always have been helpful, keep it up.

      Delete
  5. Thanks for this! I've been wondering how to get rid of the borders for a while now.

    ReplyDelete
    Replies
    1. Don't mention it :)
      Happy blogging!

      Delete
  6. CAN U PLSSS GIVE TUTORIAL HOW TO REMOVE THE SHADOW N IMAGE BORDERS IN MOBILE VIEW. 80% PEOPLE NOWADAYS COME TO UR WEB/BLOG IN MOBILE FORMAT HOPE U CAN HELP PLS THNXX

    ReplyDelete
    Replies
    1. Sure! I will update my post soon.
      Thanks for your suggestion White Oleander.

      Delete
    2. Yes. Your solution worked for my blog too, but not for my mobile view. If you could let us know when you update the blog with a mobile format option, I'd appreciate too.

      Delete
    3. **POST UPDATED**
      > check note under step 3.

      Delete
  7. It works! Thank you so much :D

    ReplyDelete
  8. Amazing! It worked for me. Clear explanation. Thanks!!

    ReplyDelete
  9. Thank you so much! It works for me. Should visit your blog earlier

    ReplyDelete
  10. That's great! Thank you. All this just to have a signature. Whew!

    ReplyDelete
  11. Thank you i just used this, so easy!

    ReplyDelete
  12. Hi there, thank you very much for the "how to guide". It works perfectly on the computer, however the mobile view remains the same (with frames), although I have selected and saved the custom mobile theme. Any idea why it doesn't work for me? Thak you!

    ReplyDelete
    Replies
    1. Looks like you haven't saved the custom mobile theme successfully.

      Delete

Every comment is appreciated but keep in mind that comments are moderated and may take some time to appear. All spam comments will be deleted, including mentioning your blog unless necessary. Thanks for understanding!

Request Post