Taking off borders from around Blogger images

Alright, Holly, this is for you.

Oh, sorry guys: if anyone else - besides Holly, I mean - is interested in how to take off borders from around blog images, here's a little tutorial, from me to you.

But! Before I go anywhere with this, a disclaimer: even though I can work/understand my way through basic CSS/HTML I am by no means a programmer and there's probably several other (and better) ways of doing what I'm doing, so if you screw something up on your blog because of what I've written here, then it's you that has a problem, not me, and I suggest you choose to listen to someone cooler/better next time.

But having said that, it's sort of worked for me, so chances are it'll sort of work for you, too.

Taking off borders from around Blogger images

By default Blogger has this thing where if you upload an image, it sticks a border around it, like this:

Now, I can very much understand why there are some very good reasons to having a border - photos with lots of white on them, for one, because without borders photos will merge with the background, especially if the background is white.

...but! I was also getting a bit tired of these borders, and I wanted them off.

So to take them off, I fiddled with some code. I went into my blog's admin section, chose "Template" and then "Edit HTML".

Clicking on that button there opened up a window that was full of code - I mean thousands, thousands of rows of code - but as long as I didn't freak out by thinking "How on earth am I going to find where they keep the borders!?" it was fine. Really.

(Which is totally true, if you disregard the fact that the first time around I deleted too much and ended up with a bunch of errors, so I had to go and reset the whole template - an action which is meant precisely for people like me, because it gets rid of any changes and puts in place a new, healthy code - and then I had another go at changing, which worked. I think.)

And specifically what I was after was at about row 330-ish (with my template, anyway) where it had words "item-thumbnail".

Now, you can look up a word "item-thumbnail" on your code by opening up a search box, and to open a search box you click Ctrl+F (Windows users) or Command+F (Apple users) (and heaven knows what you Linux users do, but being Linux users you probably don't struggle with code anyway, so I should just shut up, shouldn't I?) and then if you type "item-thumbnail" in the search box, it will take you to this place here.

And basically, if you look at the picture above then you will see that on my piece of code there is a bunch of zeros behind words such as "box-shadow". Zeros - a whole bunch of zeros. Zeros. Zeros. Zeros.

If you're not sure where these zeros are, then here, I've even dotted them all red:

And that's it, that's the trick: if your photos have borders around them then on your template you probably have numbers 1, 2, 3, 4 etc in those places - whereas all I have now is zeros. And if you want to have zeros on your code, too, then just type them in, like in a Word document: delete whatever number was there before and replace it with a zero.

And that, in a nutshell, tells your website not to have a border where at the moment borders are.

And then click "Save template" and that's it. You're done.

And that's it. Hope it made sense to you. I'm not a technical writer, sorry.


  1. Thank you for your awesome effort! This didn't work, I couldn't find the 'item-thumbnail' part... I scrolled all the way through, I used the Ctrl+F and it didn't even have the 'item-thumbnail' part. I'll send you an email.


    1. Well, another way is to use that "Apply CSS" button these guys are talking about. Does the same thing, essentially, just without making you go into that code sheet...