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.

    Random Posts

407 comments:

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

    ReplyDelete
    Replies
    1. You're welcome dear. Thanks for stopping by :)

      Delete
    2. Awesome. Finally. Thanks.

      Delete
  2. Saved my life! Thanks x

    ReplyDelete
  3. 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
  4. Anonymous6/04/2012

    Thanks soooooo much this is GREAT :)

    ReplyDelete
  5. 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
  6. Thank you so much. Found this on pinterest and it was so easy and it worked!!

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

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

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

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

    ReplyDelete
  11. awesome thank you so so much!

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

    ReplyDelete
  13. Thank you so much for this! :)

    ReplyDelete
  14. Anonymous8/05/2012

    THANK YOUUUU!

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

    ReplyDelete
  16. 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
  17. Lifesaver!! THANK YOU! Now my next question is... How can I center all of my gadgets in the right-hand column?

    ReplyDelete
  18. 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
  19. It works on me :) Now I wonder how can I remove the spaces between each images? :/ Hope you'll respond soon!

    ReplyDelete
  20. virginie8/31/2012

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

    Virginie xo

    ReplyDelete
  21. THANK YOUUUUUUUUUUUUUU!

    ReplyDelete
  22. Thank you, this is so helpful!

    ReplyDelete
  23. 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
  24. thank you!! this was a big help! :-)

    ReplyDelete
  25. Fantastic. Thanks so much!

    ReplyDelete
  26. thanks! you're a lifesaver~ XD

    ReplyDelete
  27. Thank you so much. It worked a treat

    ReplyDelete
  28. 'm so happy. thank you!

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

    ReplyDelete
  30. This worked great! Thanks so much!

    ReplyDelete
    Replies
    1. Glad it worked. Thanks for visiting!

      Delete
  31. 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
  32. Thanks so much, it really worked!

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

    ReplyDelete
  34. Thank you SO much!

    ReplyDelete
  35. Just what I needed, thank you!

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


    www.studentswife.com

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

    ReplyDelete
  38. Thank you! Thank you! Thank you!!!

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

    ReplyDelete
  40. Worked perfectly! Thank you so much:)

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

    xx
    Kelly
    Sparkles and Shoes

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

    ReplyDelete
  43. 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
  44. Thanks so much for this, it was so easy...

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

    ReplyDelete
  46. 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
  47. AMAZING. Thank you so much. :)

    ReplyDelete
  48. 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
  49. you are the best! worked perfectly!

    ReplyDelete
  50. 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
  51. Is it possible to remove the drop shadows for the sidebard images ONLY?

    ReplyDelete
  52. Anonymous11/09/2012

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

    ReplyDelete
  53. Thanks! Helped me a lot!

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

    ReplyDelete
  55. Thank you so much, it worked perfectly

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

    ReplyDelete
  57. Really helped a lot. Thanks!

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

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

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

    ReplyDelete
  61. 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
  62. Thank you so much! That was so easy and it worked!!

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

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

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

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

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

    ReplyDelete
  68. That was so easy! Thanks!!

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

    ReplyDelete
  70. Anonymous1/02/2013

    thanks...worked for me well :)

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

    ReplyDelete
  72. Beautiful, thank you so much!

    ReplyDelete
  73. Thank you SO much! Life saver!

    ReplyDelete
  74. Thank you! Very useful.

    ReplyDelete
  75. Anonymous1/04/2013

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

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

    ReplyDelete
  77. wooohooo! thank you so much!!

    ReplyDelete
  78. 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
  79. thank you thank you thank you!!

    - heather
    This Life Is Yours Blog

    ReplyDelete
  80. 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
  81. Thank you soooo much. Really helpful to find this.

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

    Chao
    Poppie
    http://thepoppie.com

    ReplyDelete
  83. 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
  84. Thank you so much! This was so easy and worked perfectly!

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

    ReplyDelete
  86. thank you! fab tip!

    ReplyDelete
  87. Good
    Thank you.....

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

    ReplyDelete
  88. Argh, thank you so much!

    ReplyDelete
  89. Thanks so much for this!

    ReplyDelete
  90. 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
  91. thank you.. it work for me

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

    ReplyDelete
  93. Awesome, thank you so much!

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

    ReplyDelete
  95. Oh my lovely , you're a life saver

    ReplyDelete
  96. 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
  97. 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
  98. 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
  99. Very helpful post. Thank you.

    ReplyDelete
  100. 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
  101. awesome!!! Thanks so much!

    ReplyDelete
  102. Thank you so much for these templates.

    ReplyDelete
  103. Thanks alot! :) I'm border free now!

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

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

    www.monochromachic.com

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

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

    ReplyDelete
  108. 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
  109. 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
  110. Wow! It's amazing how big of a difference that makes! Thanks so much for making it so quick and easy :)

    ReplyDelete
  111. Thanks for the help!

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

    Check out my awesome vintage furniture +more!

    http://www.vivaciouslyvintage.com/

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

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

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

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

    ReplyDelete
  117. Anonymous2/20/2013

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

    ReplyDelete
  118. Thanks so so much! Yay :)

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

    ReplyDelete
  120. Amazing!! Thank you so much xx

    ReplyDelete
  121. THANKYOU!!!! Bookmarking this!

    ReplyDelete
  122. Anonymous2/28/2013

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

    ReplyDelete
  123. thanks man ! nice tutorial

    ReplyDelete
  124. Anonymous3/04/2013

    Thank you so much! You are a star!

    ReplyDelete
  125. it works !
    thank you very much ♥

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

    ReplyDelete
  127. THANK YOU SO MUCH!!

    ReplyDelete
  128. Thank you X's a million!!!

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

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

    ReplyDelete
    Replies
    1. Hi, please check these tutorials [1] [2]

      Delete
  131. 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
  132. Thank you so much im adding you your blog in my favorite blogs

    ReplyDelete
  133. 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
  134. Thank you thank you thank you!! :)

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

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

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

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

    ReplyDelete
  138. Thanks for the tip. It worked

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

    thanks so much ...

    ReplyDelete
  140. That was so easy! Thank you!

    ReplyDelete
  141. 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
  142. 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
  143. It still doesn't work for me. Is it because I have a Dynamic template?

    ReplyDelete
  144. Awesome!!!!!! Thank you!!!!!

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

    www.downloadsoftwarescollection.blogspot.com

    ReplyDelete
  146. 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
  147. 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
  148. Worked perfectly. Thanks!!

    ReplyDelete
  149. Awesome! Thank you! This is a great help! :)

    ReplyDelete
  150. 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
  151. This is so perfect. Thank you very much!

    ReplyDelete
  152. 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
  153. awesome, thank you so much! :)

    ReplyDelete
  154. So helpful, thanks so much!

    artstylelove.com

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

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

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

    ReplyDelete