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 :

how to remove border and shadow from blogger images main

how to remove border and shadow from blogger images

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

Mark Rai

26 January 2017 at 21:29

That doesn't work anymore. New solution, please :)

Saurabh Jarial

29 January 2017 at 18:30

Hi Mark
Everything is fine from my end. Are you using custom Template? May be your template CSS are overriding the provided values.

jasper llee

10 November 2017 at 10:32

It worked for me just today. Thanks so much!

Saurabh Jarial

4 December 2017 at 21:41

:) I am happy for you.
don findlay

18 February 2017 at 06:05

Fan_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?

Saurabh Jarial

18 February 2017 at 19:33

Hi Don
Actually, 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.
Simon

25 February 2017 at 17:00

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.

Saurabh Jarial

25 February 2017 at 18:23

Hi SWJ
I 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 :)
Durbar

1 May 2017 at 16:09

Can you make a tutorial on how to remove shadow from a particular image?
I tried it by putting style="border:none;", still I the shadow not just leaving.

Saurabh Jarial

10 May 2017 at 07:24

Hi Durbar Ghosh

Yes, 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.

Durbar

10 May 2017 at 10:27

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

13 October 2017 at 22:38

Thanks for this! I've been wondering how to get rid of the borders for a while now.

Saurabh Jarial

14 October 2017 at 15:47

Don't mention it :)
Happy blogging!
khalidsuxx

12 November 2017 at 09:28

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

Saurabh Jarial

4 December 2017 at 21:43

Sure! I will update my post soon.
Thanks for your suggestion White Oleander.

Tiffanie Teel

26 February 2018 at 22:55

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.

Saurabh Jarial

11 March 2018 at 23:06

**POST UPDATED**
> check note under step 3.
ViPER FXC

25 December 2017 at 16:51

Thank you! It worked
Unknown

29 December 2017 at 12:46

Wow, great post.
Elly Berry

20 January 2018 at 09:04

It works! Thank you so much :D

Saurabh Jarial

6 February 2018 at 00:42

My pleasure Ellyberry
Frank Mader

4 February 2018 at 01:19

Amazing! It worked for me. Clear explanation. Thanks!!

Saurabh Jarial

6 February 2018 at 00:40

Happy Blogging Frank
Michail Michail

5 February 2018 at 23:28

This worked for me too! Thanks!

Saurabh Jarial

6 February 2018 at 00:39

Have fun.
Diana Diane Teo

25 March 2018 at 21:15

Thank you so much! It works for me. Should visit your blog earlier
Marti

26 May 2018 at 13:19

That's great! Thank you. All this just to have a signature. Whew!
Unknown

14 June 2018 at 12:43

Thank you i just used this, so easy!
Anna

7 August 2018 at 14:05

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

Saurabh Jarial

6 September 2018 at 23:18

Looks like you haven't saved the custom mobile theme successfully.
Valley Hikers

30 August 2018 at 19:50

It worked! Thank you!

Saurabh Jarial

6 September 2018 at 22:56

Have a Nice day!
debora ellen

4 November 2018 at 19:06

Lovely post! Thanks for sharing.
Edgar C. Jones

12 November 2018 at 11:45

Nice
Kirk

13 December 2018 at 02:10

I 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.
}
.content-inner {
padding: 0px;
}]]>

Saurabh Jarial

20 December 2018 at 23:07

The correct format is:

.content-inner {
padding: 0px;
}

put it in step 3
Pod'ems UP!

24 December 2018 at 07:15

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

30 December 2018 at 18:33

Thank you SOOOO much! It worked perfectly on my blog :)
Cynthia Gaffney

16 March 2019 at 09:46

Thank you! I am so glad to have found you as a resource.

Saurabh Jarial

24 April 2019 at 17:00

My pleasure! :)
Have a nice day!
Lilly Ann

30 July 2019 at 11:02

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.

Saurabh Jarial

31 July 2019 at 16:12

Thank you Lilly!
Arlene Ricahuerta

27 September 2021 at 12:17

It works for me! Lot's of thanks, very helpful post.

Howbloggerz

How To Remove Border And Shadow Around Images On Blogger

Steps : To remove border from blogger images

4 Stylish Email Subscription Widgets For Blogger

5 Stylish Search Boxes For Blogger (with Demo)

How to Generate HTML Sitemap Page on Blogger

Remove, Change Showing Posts With Label in Blogger

How To Get The URL Of An Image In Blogger

How to Change Blogger Email address (with Images)

Add Open Graph Tags To Blogger (with Images)

Top jQuery LightBoxes For Blogger (with Demo)

How to Add Your Blog in Google Search Console