How to remove Blogger Picture/Image Shadow and Border

If you want to get rid of those annoying shadows and borders around blogger images, then follow the next steps (see the difference in the screenshot below):


If you are using the old Blogger interface:
  • Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you are using the new Blogger interface:
  • Go to Dashboard - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: 0 !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;
}
Screenshot
remove border in blogger pictures

Now your blogger images should appear without any border or shadow. Cheers!
Update:

If the above method doesn't work for you, do the following:

- Go to Blogger's Dashboard > Template > Edit HTML
- Click anywhere on the code area and search by pressing the CTRL + F keys for the following code:
  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);
Note: if you can't find the entire code, then try to find this line and the rest of it should appear:
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
- Delete it and Save your template.

398 comments:

  1. thank you so much!
    my images are finally border free :D
    xxx

    ReplyDelete
  2. not working!!!! i've tried this over and over and its not making any changes to my images. what am i doing wrong???

    ReplyDelete
    Replies
    1. Hi there, sorry for the late reply! Go to Template Designer > Advanced > Images and at the "Border Color" option from the right, change the value to transparent. Hope this works

      Delete
  3. Thanks soooooo much this is GREAT :)

    ReplyDelete
  4. I tried this and also the transparent border colour but the shadow still remains! Is there anything else I can do?!

    ReplyDelete
    Replies
    1. Hi Blaming Beauty,

      Try this: Go to Design >> Edit HTML >> check the "Expand Widget Templates" checkbox and search for this piece of code:
      -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
      Next to this code you should find the following:
      -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
      box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
      Delete all these three lines (be careful to not delete the } symbol after them), then save your template.

      Delete
    2. i was having this exact same problem, and this worked! thanks so much. i was getting very frustrated and have spent weeks searching for something that worked so just wanted to say thank you

      Delete
    3. Thank you so much! Removing those three lines helped :)

      Delete
  5. Thank you so much. Found this on pinterest and it was so easy and it worked!!

    ReplyDelete
  6. Genius. THANK YOU. Been trying to figure that out for MONTHS. Seriously. Genius!

    ReplyDelete
  7. Oh gosh, I love you! I've been trying to remove it for ages but failed! Thank you! Have a nice day :)

    ReplyDelete
  8. thanks maaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaan it's really work fine ! thank you

    ReplyDelete
  9. thankyouuu so much. Wanted my pictures with no border forever! :)

    ReplyDelete
  10. Super easy to apply and very helpful, thankyou! :)

    ReplyDelete
  11. THANK YOU SOOOOOOOOOOO much! I was looking for this code for a long time! Gold bless you!:-)

    ReplyDelete
  12. thank you very much! this is the easiest tutorial & most importantly, it works great! :D

    ReplyDelete
    Replies
    1. You're all welcome :) thanks for visiting!

      Delete
  13. Lifesaver!! THANK YOU! Now my next question is... How can I center all of my gadgets in the right-hand column?

    ReplyDelete
  14. Does anybody know how to remove the drop shadow from around the outside of the blog? I have a drop shadow that is going around the outside and cannot get rid of it!

    ReplyDelete
    Replies
    1. Hi BryonyDhyan,
      Search for this line:
      .content-outer {
      Remove the following just below it:

      -moz-box-shadow: 0 0 40px rgba(0, 0, 0, .15);
      -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .15);
      -goog-ms-box-shadow: 0 0 10px #333333;
      box-shadow: 0 0 40px rgba(0, 0, 0, .15);

      Hope it helps!

      Delete
    2. .CONTEN-OUTER is correct. many thanks.

      Delete
  15. It works on me :) Now I wonder how can I remove the spaces between each images? :/ Hope you'll respond soon!

    ReplyDelete
  16. Thank you!! After trying so many different things that didn't work, finally a solution!

    Virginie xo

    ReplyDelete
  17. how do i get rid of the shadow borders on pictures that are put in with the gadets on blogger?

    ReplyDelete
    Replies
    1. Hi Bella, sorry for the very late reply.
      You should search for this code in your template:
      .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
      .BlogList .item-thumbnail img {


      ...and you will find the following code a little below:

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


      Detele them. Hope it works... and thanks for visiting!

      Delete
  18. thank you!! this was a big help! :-)

    ReplyDelete
  19. Yay! Finally! Photos are border-free now!! THANK YOU!!! :)

    ReplyDelete
  20. Thanks so much! All your posts are really helping me and this one was REALLY quick and easy, even for a noob like me :)

    ReplyDelete
  21. how to post transparent images in blogger posts? they always turns in white background :(

    ReplyDelete
  22. Just what I needed, thank you!

    ReplyDelete
  23. THank you!! it worked for my blog!


    www.studentswife.com

    ReplyDelete
  24. Fantastic post and Thanks for sharing this info. It's very helpful….

    ReplyDelete
  25. Thank you! Thank you! Thank you!!!

    ReplyDelete
  26. Thank you so so much for this. Worked well for me :)

    ReplyDelete
  27. Thank you so much, this was incredibly helpful!

    xx
    Kelly
    Sparkles and Shoes

    ReplyDelete
  28. Worked for me. Thanks so much! My blog looks much better now!

    ReplyDelete
  29. the code seems to have removed the border but now my images seem to be slightly indented when i choose to justify it on the left. is there a way i can get rid of the extra space so it lines up with the title of my post?

    ReplyDelete
  30. Thanks so much for this, it was so easy...

    ReplyDelete
  31. Yes, this was amazing! I hated those drop shadows and I didn't know how to get rid of them. Thanks for sharing!

    ReplyDelete
  32. Hi there !
    i am using the new blogger template, the magzine one. i copied the text in to the CSS, but its of no use, i guess. My pics are still with white border. can u please help.

    ReplyDelete
  33. thank you for this!! i've been hating the look of it for so long and just hadn't gotten around to try and figure it out. you are a lifesaver AND a time saver. c;

    ReplyDelete
  34. you are the best! worked perfectly!

    ReplyDelete
  35. I was searching for something else and lo and behold I find this fix. Thank you. It's annoyed me forever and I've tried a dozen different things. Thanks!

    ReplyDelete
  36. Is it possible to remove the drop shadows for the sidebard images ONLY?

    ReplyDelete
  37. Excellant-Just what I needed for the images. Thank you

    ReplyDelete
  38. Ive done all of these and theres still a shadow! ): WHAT AM I DOING WRONG </3

    ReplyDelete
  39. Thank you so much, it worked perfectly

    ReplyDelete
  40. Yay! Thanks! I deleted my version of the code (it was a little different) and replaced it with your code. Works great! <3

    ReplyDelete
  41. This was so helpful and easy to do ! thank you for sharing!!

    ReplyDelete
  42. Is there a way to Add the Border? I want the border on my page, and cant find any CCSS

    ReplyDelete
  43. Ahhhhh thank youuuuuuuuu so much!!!!!!!

    ReplyDelete
  44. Hmm, oddly enough that trick seems to work when viewing on IE 9, but for some reason Chrome is still displaying the shadowbox... Any suggestions?

    ReplyDelete
  45. Thank you so much! That was so easy and it worked!!

    ReplyDelete
  46. amazing, thank you so much.
    my blog is much cleaner without those incessant borders.
    - matthew.
    chante-loup.blogspot.ca

    ReplyDelete
  47. Thank you for this. Simple, coherent instructions, and an easy fix. Kudos.

    ReplyDelete
  48. i bow down to you! it was driving me nuts. thank you so much!

    ReplyDelete
  49. Thank you so much for this easy fix!! Greatly appreciated!

    ReplyDelete
  50. Thanks so much!!! Worked like a charm!

    ReplyDelete
  51. I have been searching forever for this info and it worked perfectly - Thanks so much!

    ReplyDelete
  52. thanks...worked for me well :)

    ReplyDelete
  53. Oh. My. Goodness. Thank you!! Been trying to fix this for a week now. Worked like a charm. :)

    ReplyDelete
  54. Thank you SO much! Life saver!

    ReplyDelete
  55. Thank you!!
    This actually made my transparent backgrounds in my images work as well. Perfect and Thank you

    ReplyDelete
  56. Thanks the blog looks great after adding the CSS to remove all that horrible white background. Thanks again for sharing :-)

    ReplyDelete
  57. One more HUGE THANK YOU! I take pains with blog design and was stumped by this horror when I finally upgraded from my antique template.

    ReplyDelete
  58. Thank your simple explanationfinnaly helped me in deleting code worked a treat and helped me get rid of that suprerfluous line aroung images i just got rid of the text and didnt try altering as others have suggested.

    ReplyDelete
  59. Thank you soooo much. Really helpful to find this.

    ReplyDelete
  60. Thank you so very much! That was so frustrating! You are a lifesaver dude!

    Chao
    Poppie
    http://thepoppie.com

    ReplyDelete
  61. Hi can someone help me please? I can't find the code that creates the borders around my blog's images.

    http://diegeticlizard.blogspot.com/

    ReplyDelete
  62. Thank you so much! This was so easy and worked perfectly!

    ReplyDelete
  63. I can't tell you how long i have loathed having those annoying shadows. What an easy fix! Thanks so much for sharing!!! :)

    ReplyDelete
  64. Good
    Thank you.....

    http://skumar-computer-tips.blogspot.in/

    ReplyDelete
  65. Saved my blog. My blog does not have just photos I design photo layouts with drawings. It is supposed to look like I drew it straight on. THanks so so so much

    http://aswrensfly.blogspot.com

    ReplyDelete
  66. wow wow wow! That was awesome. Worked perfectly for me... waiting for more blogger solutions in 2013 from my best *HelpBlogger*

    ReplyDelete
  67. Just had to say THANK YOU! No more annoying shadows around my blog pictures! =)

    ReplyDelete
  68. A very simple fix but worked perfectly... Thanks a lot!
    The border has been bugging me for a while because it didn't really fit with the rest of the design :)

    ReplyDelete
  69. Thank you so much! I've been trying to figure this out so many times and all the other tutorials are for the old blogger. Saved my life :)

    Mariana | www.goingteen.blogspot.sg

    ReplyDelete
  70. Thank you very much! Worked like a charm looking for " -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);"!
    Thank you again!

    ReplyDelete
  71. FINALLYYY! I was looking for some other HTML stuff and suddenly I saw this post. amazing, cause I was looking for this for ages. Thanks a lot!

    ReplyDelete
  72. Thank you so much for these templates.

    ReplyDelete
  73. This is my nice tutorial in blogger :D
    Thanks

    ReplyDelete
  74. Thank you so much for this easy fix! You're the best :)

    www.monochromachic.com

    ReplyDelete
  75. Thank you so much! That border was annoying me for months!

    ReplyDelete
  76. Thanks so much for the tip. I can use
    all the help I can get.
    Sandy

    ReplyDelete
  77. Thank you! It didn't work at first simply because I didn't hit "enter" after I had pasted the content even though I clicked on "apply to blog." I love easy fixes!

    ReplyDelete
  78. Here I was thinking I'm the only one that is totally annoyed by those borders.
    Now I found this post and was finally able to remove them. Thank you so much!

    ReplyDelete
  79. Wow! It's amazing how big of a difference that makes! Thanks so much for making it so quick and easy :)

    ReplyDelete
  80. The first part of your directions worked (CSS) yay! Thank you!!!

    Check out my awesome vintage furniture +more!

    http://www.vivaciouslyvintage.com/

    ReplyDelete
  81. looking for this for ages and finally found it thank you!!

    ReplyDelete
  82. Thank you so much. I hated that border! I am now borderless.

    ReplyDelete
  83. wow finally the irritating white border has gone thanks alot~

    ReplyDelete
  84. Thank you. it worked

    ReplyDelete
  85. Awesome! Worked like a charm (and I know nothing about html)!!

    ReplyDelete
  86. Fuck sake... i really hate borders around images! Thanks to you its gone! Thanks!

    ReplyDelete
  87. Thanks for this info! It's working and it's great!

    ReplyDelete
  88. Many thanks for this info! Your directions were clear and saved me a lot of headache trying to figure it out myself.

    ReplyDelete
  89. Thank you so much! You are a star!

    ReplyDelete
  90. it works !
    thank you very much ♥

    ReplyDelete
  91. Thank u soooooo much:) love ur code

    ReplyDelete
  92. Thank you! Easy Peasy per your instructions... xox

    ReplyDelete
  93. Hi ! I want to change the border to raduis I hope you get my ask

    ReplyDelete
  94. Thank you, thank you, thank you for this code. And thank you to my friend Kimberly for pinning this post so I found it! Will now be checking out the rest of your site, as I have desperately wanting to do some customization to my blog.

    ReplyDelete
    Replies
    1. Glad it was useful :) Thanks for visiting!

      Delete
  95. Thank you so much im adding you your blog in my favorite blogs

    ReplyDelete
  96. This is great, I will come back and see if I need it later. Right now, I'd like to romove it only now and then on certain posts. Such as my last post at sunnyside I thought it would be nice for the fairies to not have a border around them so it would seem as if flying around rather than a photo. So I would maybe not have borders around any of them on that one particular post.?? any ideas?

    ReplyDelete
    Replies
    1. When you are uploading the image, go to the HTML section and after the img tag, add this line class="fairies" (screenshot)... then go to your template and paste the following code just above ]]></b:skin>:

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

      Hope it works!

      Delete
    2. Btw, you should add the class="fairies" line each time you want to make the borders invisible on a certain image.

      Delete
  97. Replies
    1. Glad it was useful for you, and for everybody here (hopefully) :)
      Thanks for visiting!

      Delete
  98. This is amazing!! Seriously, thank you so much for sharing. This pretty much saved my sanity, haha.

    ReplyDelete
  99. Oh THANK YOU thank you THANK YOU!! I hated those ugly shadows.

    ReplyDelete
  100. Thanks! I tried lots of things and this finally worked!

    ReplyDelete
  101. its works with me here: http://www.mansydesigntools.blogspot.com

    thanks so much ...

    ReplyDelete
  102. That was so easy! Thank you!

    ReplyDelete
  103. Thank you so much, however on a few posts there is still a border? Would it have something to do with the picture? Should I just remove the picture and upload it again?
    Thanks.

    ReplyDelete
    Replies
    1. Yep, it's because the pictures itself have a border. You should crop your pictures to have no border and upload them again. This trick is only for the border outside the pictures...

      You're welcome!

      Delete
  104. This did not work for a blog I created yesterday. I believe they changed it to use box shadow images. Anyway, I tried just the following, and it worked:

    img {
    -webkit-border-image: none !important;
    border-image-source: none !important;
    }

    ReplyDelete
  105. It still doesn't work for me. Is it because I have a Dynamic template?

    ReplyDelete
  106. I am using singnature on my blog posts and it worked perfectly for that!
    Thanks alot!

    www.downloadsoftwarescollection.blogspot.com

    ReplyDelete
  107. Hello!

    Thank you so much for this information - what a godsend!

    Please drop in my site - www.genealogycanada.blogspot.com - and see how my pictures now stand out (without borders), like the maple leaf graphic I used for today's post. So much better.

    Happy Tartan Day!

    Elizabeth

    ReplyDelete
  108. Thanks so much for this! Is there any way of getting rid of the white space between the images now? I have no space between them when I'm writing a post but it creates a border anyway. Help much appreciated!

    ReplyDelete
    Replies
    1. Hello Rachel,

      Go to your Template and search for this line:
      .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
      .BlogList .item-thumbnail img {

      ...and just below it, delete this one: padding: 2px;

      I hope it works. Thanks for stopping by :)

      Delete
  109. Awesome! Thank you! This is a great help! :)

    ReplyDelete
  110. Thank you so much! I've been putting up with that stupid border on my personal blog for years... Didn't even think about googling it, duh.

    ReplyDelete
  111. This is so perfect. Thank you very much!

    ReplyDelete
  112. This still isn't working for me. I made a customized signature using GIMP, saved it as a png file and used a transparent background. However, it is still showing up as as having a background :( HELP! I have tried all the suggestions on the comments and nothing has worked. lol Thank you!

    ReplyDelete
  113. awesome, thank you so much! :)

    ReplyDelete
  114. So helpful, thanks so much!

    artstylelove.com

    ReplyDelete
  115. Cool! Thank you so much! ;)

    Jamie (http://jamielouborile.blogspot.com/)

    ReplyDelete
  116. oh that is so cool! thank you so much. you're a life saver :)))

    ReplyDelete
  117. it worked! thank you so much!

    ReplyDelete
  118. it worked!!! thank you so much! I have spent the last two days trying to figure this out!
    having to import my blog from another and this was a big issue when moving everything over... other then NO pictures are coming up either now.. :( ONE problem fixed! thank you!

    ReplyDelete
  119. It didn't helpl. As you can see, still borders! Added CSS but on HTML edit there wasn't an option2 for borders : I searched all Image and BOrders and the only one possible solution would be to delete this line:

    div class='fauxborder-left content-fauxborder-left'

    Is that it? Please reply.

    ReplyDelete
  120. Really helped me ! It's a shame it was so difficult to do this little change, Blogspot need to fix this ! Thank you

    ReplyDelete