How to remove Blogger Picture/Image Shadow and Border

at April 07, 2012
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.
Tags: ,

Comments/disqusion
397 comments

  1. says:

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

  2. says:

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

  3. says:

    Saved my life! Thanks x

  4. says:

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

  5. says:

    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

  6. says:

    Thanks soooooo much this is GREAT :)

  7. says:

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

  8. says:

    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.

  9. says:

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

  10. says:

    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

  11. says:

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

  12. says:

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

  13. says:

    thanks maaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaan it's really work fine ! thank you

  14. says:

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

  15. says:

    awesome thank you so so much!

  16. says:

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

  17. says:

    amazing thanks so much!

  18. says:

    Thank you so much for this! :)

  19. says:

    THANK YOUUUU!

  20. says:

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

  21. says:

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

  22. says:

    You're all welcome :) thanks for visiting!

  23. says:

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

  24. says:

    thank you!!

  25. says:

    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!

  26. says:

    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!

  27. says:

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

  28. says:

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

    Virginie xo

  29. says:

    THANK YOUUUUUUUUUUUUUU!

  30. says:

    Thank you, this is so helpful!

  31. says:

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

  32. says:

    thank you!! this was a big help! :-)

  33. says:

    Fantastic. Thanks so much!

  34. says:

    thanks! you're a lifesaver~ XD

  35. says:

    Thank you so much. It worked a treat

  36. says:

    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!

  37. says:

    'm so happy. thank you!

  38. says:

    You're welcome :)

  39. says:

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

  40. says:

    This worked great! Thanks so much!

  41. says:

    Glad it worked. Thanks for visiting!

  42. says:

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

  43. says:

    Thanks!

  44. says:

    Thanks so much, it really worked!

  45. says:

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

  46. says:

    Thank you SO much!

  47. says:

    thanks~!!

  48. says:

    Just what I needed, thank you!

  49. says:

    THank you!! it worked for my blog!


    www.studentswife.com

  50. says:

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

  51. says:

    Thank you! Thank you! Thank you!!!

  52. says:

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

  53. says:

    Worked perfectly! Thank you so much:)

  54. says:

    Thank you so much, this was incredibly helpful!

    xx
    Kelly
    Sparkles and Shoes

  55. says:

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

  56. says:

    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?

  57. says:

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

  58. says:

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

  59. says:

    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.

  60. says:

    AMAZING. Thank you so much. :)

  61. says:

    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;

  62. says:

    you are the best! worked perfectly!

  63. says:

    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!

  64. says:

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

  65. says:

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

  66. says:

    thank you!!!!!!

  67. says:

    Thanks! Helped me a lot!

  68. says:

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

  69. says:

    Thank you so much, it worked perfectly

  70. says:

    thank you.....

  71. says:

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

  72. says:

    Really helped a lot. Thanks!

  73. says:

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

  74. says:

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

  75. says:

    Ahhhhh thank youuuuuuuuu so much!!!!!!!

  76. says:

    Thank you!

  77. says:

    .CONTEN-OUTER is correct. many thanks.

  78. says:

    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?

  79. says:

    Thank you so much!

  80. says:

    Thank you so much! That was so easy and it worked!!

  81. says:

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

  82. says:

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

  83. says:

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

  84. says:

    thanks!

  85. says:

    Thank you so much for this easy fix!! Greatly appreciated!

  86. says:

    Thanks so much!!! Worked like a charm!

  87. says:

    That was so easy! Thanks!!

  88. says:

    Thanks, it worked!

  89. says:

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

  90. says:

    thanks...worked for me well :)

  91. says:

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

  92. says:

    Beautiful, thank you so much!

  93. says:

    Thank you SO much! Life saver!

  94. says:

    Thank you! Very useful.

  95. says:

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

  96. says:

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

  97. says:

    wooohooo! thank you so much!!

  98. says:

    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.

  99. says:

    Thank you!!

  100. says:

    thank you thank you thank you!!

    - heather
    This Life Is Yours Blog

  101. says:

    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.

  102. says:

    Thank you soooo much. Really helpful to find this.

  103. says:

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

    Chao
    Poppie
    http://thepoppie.com

  104. says:

    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/

  105. says:

    Thank you so much! This was so easy and worked perfectly!

  106. says:

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

  107. says:

    thank you! fab tip!

  108. says:

    Good
    Thank you.....

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

  109. says:

    Thanks so much! :)

  110. says:

    Argh, thank you so much!

  111. says:

    Thanks so much for this!

  112. says:

    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

  113. says:

    thank you.. it work for me

  114. says:

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

  115. says:

    Awesome, thank you so much!

  116. says:

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

  117. says:

    Oh my lovely , you're a life saver

  118. says:

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

  119. says:

    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

  120. says:

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

  121. says:

    Very helpful post. Thank you.

  122. says:

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

  123. says:

    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!

  124. says:

    Thank you!!!

  125. says:

    Thanks so much!

  126. says:

    awesome!!! Thanks so much!

  127. says:

    Thank you so much for these templates.

  128. says:

    Thanks alot! :) I'm border free now!

  129. says:

    This is my nice tutorial in blogger :D
    Thanks

  130. says:

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

    www.monochromachic.com

  131. says:

    Fantastic!

  132. says:

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

  133. says:

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

  134. says:

    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!

  135. says:

    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!

  136. says:

    You are my hero!!!

  137. says:

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

  138. says:

    Thanks for the help!

  139. says:

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

    Check out my awesome vintage furniture +more!

    http://www.vivaciouslyvintage.com/

  140. says:

    looking for this for ages and finally found it thank you!!

  141. says:

    Thanks so much!

  142. says:

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

  143. says:

    wow finally the irritating white border has gone thanks alot~

  144. says:

    Thank you. it worked

  145. says:

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

  146. says:

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

  147. says:

    Thanks so so much! Yay :)

  148. says:

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

  149. says:

    Amazing!! Thank you so much xx

  150. says:

    THANKYOU!!!! Bookmarking this!

  151. says:

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

  152. says:

    thanks man ! nice tutorial

  153. says:

    Thank you so much! You are a star!

  154. says:

    It works! Thank you!

  155. says:

    it works !
    thank you very much ♥

  156. says:

    Thank u soooooo much:) love ur code

  157. says:

    THANK YOU SO MUCH!!

  158. says:

    Thank you X's a million!!!

  159. says:

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

  160. says:

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

  161. says:

    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.

  162. says:

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

  163. says:

    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?

  164. says:

    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!

  165. says:

    Glad it was useful :) Thanks for visiting!

  166. says:

    Hi, please check these tutorials [1] [2]

  167. says:

    You're welcome.

  168. says:

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

  169. says:

    Thank you thank you thank you!! :)

  170. says:

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

  171. says:

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

  172. says:

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

  173. says:

    Awesome. Finally. Thanks.

  174. says:

    Thanks! I tried lots of things and this finally worked!

  175. says:

    Thanks for the tip. It worked

  176. says:

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

    thanks so much ...

  177. says:

    yay thank you so much!

  178. says:

    That was so easy! Thank you!

  179. says:

    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.

  180. says:

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

  181. says:

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

  182. says:

    Awesome!!!!!! Thank you!!!!!

  183. says:

    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!

  184. says:

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

    www.downloadsoftwarescollection.blogspot.com

  185. says:

    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

  186. says:

    Nice. Thx!

  187. says:

    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!

  188. says:

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

  189. says:

    Worked perfectly. Thanks!!

  190. says:

    Awesome! Thank you! This is a great help! :)

  191. says:

    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.

  192. says:

    This is so perfect. Thank you very much!

  193. says:

    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!

  194. says:

    awesome, thank you so much! :)

  195. says:

    So helpful, thanks so much!

    artstylelove.com

  196. says:

    Cool! Thank you so much! ;)

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

  197. says:

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

  198. says:

    it worked! thank you so much!

  199. says:

    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!

  200. says:

    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.

«Oldest ‹Older
  1 – 200 of 397  
Newer› Newest»