How to Remove Border Around Pictures in Blogger?

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!

27 Comments (click here to leave a comment)

  1. Steven Smith

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

  2. Ankit Kumar Singla

    @ 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 :)

  3. Ankit Kumar Singla

    @ 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!

  4. Ankit Kumar Singla

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

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

  6. MKnight

    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)

  7. Options_Rock

    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

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

  8. Nickolai Gibson

    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

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

  9. Kate G.

    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?

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

*

*


CommentLuv badge