How to Remove Border Around Pictures in Blogger?

Ankit Kumar Singla05/04/2013Blogger

Remove Image Border
When newbie blogger start their blog, they don’t care too much about their blog design and look like images uploaded in the blog posts comes with a default border and shadow around it which looks very nasty. But as they start learning blogging they feel that they should remove the border around the images to make blog posts more attractive and professional. In one of my previous published posts I have discussed 6 Tips to optimize images for SEO to gain traffic from search engines and today we will discuss about how to remove border and shadow around the images in blogger. So, let start the tutorial.

Remove Border from Image in Single Post

If you want to get rid from the borders and shadow only from a particular image uploaded in the post then follow below steps.

  1. Upload image in your post.
  2. Now choose HTML from top left corner.
  3. compose html

  4. Now locate to the image HTML code which will something look like this:
  5. Now to remove the border simply add a little piece of CSS code style=”border-style:none;” into the tag as shown below.
  6. style=”border-style:none;” border=”0″ src=”http://img.bloggertipstricks.com/uploads/2013/04/Remove-Border1.jpg” />

It’s all done!

Remove Border and Shadow From All Images

Using this method will remove border from all of your blog posts images and even it will also not appear in your future posts.

  1. Go to Blogger >> Template.
  2. First backup your blog template.
  3. Click Edit HTML.
  4. Now search below similar code in your template.

  5. .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
    .BlogList .item-thumbnail img {
     padding: $(image.border.small.size);

     background: $(image.background.color);
     border: 1px solid $(image.border.color);

     -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
     -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
     box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    }

  6. Replace the entire piece of code with the code given below.

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

  8. Click on Save Template button.
  9. You are done!

Remove Border from Dynamic Views Templates

If you are using blogger Dynamic Views template for your blog, then the above code will not work for you. To remove border from dynamic views template follow below steps.

  1. Go to Blogger >> Template >> Edit HTML.
  2. Press Ctrl+F and search for
  3. ]]>

  4. Now paste below code just above it.
  5. .entry-content img{
    box-shadow: none !important;
    padding: 0px !important;
    border: 0px !important;
    }

  6. Click on Save Template button.

That’s it.

  • Also Read: Add Title and Alt Attribute To Optimize Images For SEO

Need Help?

These were all the ways to remove border and shadow around images in blogger posts. If you have any doubt or query then leave a comment below and I will surely reply you to solve your queries. Happy Blogging!

Suggested Similar Articles


About the Author
Hi, it’s me behind this blog - BloggerTipsTricks.com. Interested to blogging, SEO Area, WordPress Themes, Plugins and various blogging tools. Want to connect with me? Add me in your Google+ circle and lets get connected.

27 Brilliant Comments - Join Discussion Now!

  1. shakeel asghar says:

    nice tip brother keep it up

  2. Ankit Kumar Singla says:

    @ shekeel
    Thanks bro! Please Keep visiting :)

  3. Steven Smith says:

    Unable to do That.Cause i have custom template.
    plz tell how to do in that?/……………

  4. Ankit Kumar Singla says:

    @ Steven
    No need to worry. Search .post img in your blog template and paste border:0px; after it as shown below.

    .post img {
    border:0px;
    }

    Hope it works for you :)

  5. I can able to change particular one image but i try so much to remove boarder from template itself but still not done. help me :D

  6. Ankit Kumar Singla says:

    @ technomagzine.com
    Search below code in your blog template
    .post-info img {
    max-width: 600px;
    padding: 2px;
    border: 1px solid #ccc;
    }

    Now remove border: 1px solid #ccc; from it and save the template. You are done!

  7. Ankit Kumar Singla says:

    @ Steven Smith
    Dear in that case I can only help you once I checked your blog template. Submit your blog URL in the comment then I’ll surely help you.

  8. Johny Depp says:

    Thanks a million for this tip. We bloggers generally don’t give a damn about a blurred thin border of any image we put in. But in fact it really does matter from SEO point of view. Thank you buddy for sharing such a great insight. I didn’t know about it earlier.

    Regards,
    Johny
    Make Money Online

  9. Hey so I tried the Dynamic View method for my blog and it cant find what you said to type in but there are borders. I’m a little confused…..

  10. Ankit Kumar Singla says:

    @ Excerpts From Hell
    Dear blogger team has changes the HTML Template editor. Now you have to first expand the code then you will be able to find that piece of code. Check step#4 of below tutorial. It will give you the hint on expanding the CSS code.
    http://www.bloggertipstricks.com/2013/04/change-hyperlink-color.html

  11. khan bahi says:

    Nice Post

  12. i-am-raina says:

    thanks a lot!!!!

  13. MKnight says:

    Thank you. But is it possible to remove “shadows” (not borders) from a “single” post (not the entire blog)? (I used something like -moz-box-shadow)

  14. Y.U.P NYC says:

    THANK YOOOU!!!

  15. Options_Rock says:

    I don’t mind the border in general around the pictures. But I want to remove it from select pictures. I am using the new dynamic templates. Is there a way to do that for just some select pictures?

    • Ankit Kumar Singla says:

      Yes dear you can easily do that. Simply add below CSS in your image tag.
      style=”border: none;”/>

  16. Dila Yazid says:

    I’ve been dying to get it done and finally it is. Thank you so so much!!

  17. Nickolai Gibson says:

    Thanks. It worked. I also pasted the whole moz-box-shadow code(s) into the style=” “
    removed the shadow from that image, without doing it for the whole blog.
    Since after removing the frame it still had shadow.

    • Ankit Kumar Singla says:

      Dear you have no need to use any moz-box-shadow code. Remove that code and you’ll be done :)

  18. Michele Pacey says:

    Thanks so much! Worked like a charm on the test blog!

  19. Kate G. says:

    This works perfectly! Thanks a ton! I use the provided Blogger Simple layout.

    But there’s another issues after having removed the shadow and frame…the original “frame” distance remains and hence it doesn’t line up flush with the paragraphs. Basically the photo stays in the same position as before, only now the shadows and frame are not visible. Do you know how to fix this?

  20. Christy says:

    Hi Ankit,

    I’m in a pickle as well. I upload a head shot of my self and it’s HUGE! So I want to remove it off my home page. Would you use the same instruction as above that you left? Thank you for your time. Christy

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>