How To Remove Border And Shadow Around Images On Blogger
By default blogger shows border and shadow around images or photos of your blog post if you find this annoying and want to remove or delete it just follow the given tutorial with images :
Step 1. Log in to your Blogger account, then go to Template > Edit HTML.
Step 2. Click anywhere inside the code and search for following code ( CTRL+F ) :
Step 3. Copy and paste the following code just above it :
Note: To remove border from mobile view goto Theme > Click on gear icon under mobile > Under 'Choose mobile theme' Select "Custom" and click Save.
Step 4. Save the Template.
That's it !
Now visitors of your blog will not see any border and shadow around your blog images. For any issues related to above tutorial comment below. Stay Updated, Browse Howbloggerz ! :)
Steps : To remove border from blogger images
Step 1. Log in to your Blogger account, then go to Template > Edit HTML.
Step 2. Click anywhere inside the code and search for following code ( CTRL+F ) :
]]></b:skin>
Step 3. Copy and paste the following code just above it :
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
padding: 0px !important;
background: none !important;
border: 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;
}
Note: To remove border from mobile view goto Theme > Click on gear icon under mobile > Under 'Choose mobile theme' Select "Custom" and click Save.
Step 4. Save the Template.
That's it !
Now visitors of your blog will not see any border and shadow around your blog images. For any issues related to above tutorial comment below. Stay Updated, Browse Howbloggerz ! :)
That doesn't work anymore. New solution, please :)
ReplyDeleteHi Mark
DeleteEverything is fine from my end. Are you using custom Template? May be your template CSS are overriding the provided values.
It worked for me just today. Thanks so much!
Delete:) I am happy for you.
DeleteFan_tas_tic, it actually worked for me. I don't know what Mark's doing. I assumed I needed to put it on a new line and so added one at 580. Maybe he tagged it on to the bracket and it made a difference?
ReplyDeleteHi Don
DeleteActually, New Line doesn't matter too much in coding, but it is necessary to add code to the right place because a single piece of misplaced code can affect your template.
Suggestion: Always backup your template before making any changes so that you can easily revert back if something wrong happens.
Thanks for this handy tip. I entered the code in the Custom CSS box (in the advanced section of the template customiser and it worked fine.
ReplyDeleteHi SWJ
DeleteI am happy to hear that, this trick worked for you.
Yes, You can also add the given CSS in Custom CSS box of Template Customiser.
I will update my posts :)
Can you make a tutorial on how to remove shadow from a particular image?
ReplyDeleteI tried it by putting style="border:none;", still I the shadow not just leaving.
Hi Durbar Ghosh
DeleteYes, I am definitely going to create a tutorial on this topic :)
Setting border style to none is not going to work because the shadow around images is not due to border its actually due to "Shadow code" so, instead of setting border:none; add box-shadow: 0px 0px 0px transparent !important; to that particular image.
I hope this will help you.
Happy blogging.
After a lot of search I found that code in W3schools CSS section. Yet, thanks a lot for the reply. Your articles always have been helpful, keep it up.
DeleteThanks for this! I've been wondering how to get rid of the borders for a while now.
ReplyDeleteDon't mention it :)
DeleteHappy blogging!
CAN U PLSSS GIVE TUTORIAL HOW TO REMOVE THE SHADOW N IMAGE BORDERS IN MOBILE VIEW. 80% PEOPLE NOWADAYS COME TO UR WEB/BLOG IN MOBILE FORMAT HOPE U CAN HELP PLS THNXX
ReplyDeleteSure! I will update my post soon.
DeleteThanks for your suggestion White Oleander.
Yes. Your solution worked for my blog too, but not for my mobile view. If you could let us know when you update the blog with a mobile format option, I'd appreciate too.
Delete**POST UPDATED**
Delete> check note under step 3.
Thank you! It worked
ReplyDeleteWow, great post.
ReplyDeleteIt works! Thank you so much :D
ReplyDeleteMy pleasure Ellyberry
DeleteAmazing! It worked for me. Clear explanation. Thanks!!
ReplyDeleteHappy Blogging Frank
DeleteThis worked for me too! Thanks!
ReplyDeleteHave fun.
DeleteThank you so much! It works for me. Should visit your blog earlier
ReplyDelete:) Thank you!
DeleteThat's great! Thank you. All this just to have a signature. Whew!
ReplyDeleteThank you i just used this, so easy!
ReplyDeleteHi there, thank you very much for the "how to guide". It works perfectly on the computer, however the mobile view remains the same (with frames), although I have selected and saved the custom mobile theme. Any idea why it doesn't work for me? Thak you!
ReplyDeleteLooks like you haven't saved the custom mobile theme successfully.
DeleteIt worked! Thank you!
ReplyDeleteHave a Nice day!
DeleteLovely post! Thanks for sharing.
ReplyDeleteNice
ReplyDeleteI have a customized theme but can you show, specifically where to put that code? I put it on the line above but it didnt work. my code looks like this.
ReplyDelete}
.content-inner {
padding: 0px;
}]]>
The correct format is:
Delete.content-inner {
padding: 0px;
}
put it in step 3
I have spent HOURS trying to figure out how to get rid of the white border around my images. I followed your steps and had it fixed in 90 seconds. Thank you so much.
ReplyDeleteThank you SOOOO much! It worked perfectly on my blog :)
ReplyDeleteThank you! I am so glad to have found you as a resource.
ReplyDeleteMy pleasure! :)
DeleteHave a nice day!
It's really a great and helpful piece of info. I'm glad that you just shared this useful information with us. Please keep us up to date like this. Thank you for sharing.
ReplyDeleteThank you Lilly!
Delete