How To Add Lines Around Photos On Blog

I'm passionate about framing or adding borders to my digital images, and creating photo collages in Photoshop, something I really enjoy doing!

Thus, when a thin border is automatically set around all photos uploaded in my Blogger posts, I find them awfully unappealing! And, as long as I don't know how to remove them, I've learnt to accept them, though grudgingly. By default, any image uploaded via Blogger's Updated Post Editor will have a border around it as shown in this photo below that was captured from our garden. It seems that the border is to inform readers that the image is a link which I think is unnecessary as almost everyone knows that for a fact :

Screen shot of flower collage, to show the border set around it by default by Blogger

Fortunately, I stumbled upon an article online recently, that showed how it can be easily removed. I've further refined it after doing some research and experiments.

Here's sharing 3 ways on how it can be done - so simple, easy and quick :

(A) Remove a border from A SINGLE uploaded image, via Blogger's Post Editor :

You need to rectify it in the Edit HTML mode even though the photo was uploaded in the Compose mode.
Go to the related post that you want to edit at Post Editor. Select the Edit HTML mode and locate the HTML that was used to display the image, which will appear something like this block of code below :
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA6A9o1LBoQJNscgqAlvL8BTi4CXLGYbvEv2QPbkK1dA8Ix4Q6fAb07t0F92Q3_GxoxYEiGF6BhH1cLVOPUSRiOr_Dgu334KWL2nfuzAmfrTe-cgb49O4CvGFH8qTUk95XCCWoJvabhOo/s1600-h/IMG_0709+flower+collage.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA6A9o1LBoQJNscgqAlvL8BTi4CXLGYbvEv2QPbkK1dA8Ix4Q6fAb07t0F92Q3_GxoxYEiGF6BhH1cLVOPUSRiOr_Dgu334KWL2nfuzAmfrTe-cgb49O4CvGFH8qTUk95XCCWoJvabhOo/s400/IMG_0709+flower+collage.jpg" /></a>
Then, to remove the border, just add the CSS (Cascading Style Sheet) style attribute, style="border-style:none;" to the <img> tag as shown below in red :
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA6A9o1LBoQJNscgqAlvL8BTi4CXLGYbvEv2QPbkK1dA8Ix4Q6fAb07t0F92Q3_GxoxYEiGF6BhH1cLVOPUSRiOr_Dgu334KWL2nfuzAmfrTe-cgb49O4CvGFH8qTUk95XCCWoJvabhOo/s1600-h/IMG_0709+flower+collage.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img style="border-style:none;" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA6A9o1LBoQJNscgqAlvL8BTi4CXLGYbvEv2QPbkK1dA8Ix4Q6fAb07t0F92Q3_GxoxYEiGF6BhH1cLVOPUSRiOr_Dgu334KWL2nfuzAmfrTe-cgb49O4CvGFH8qTUk95XCCWoJvabhOo/s400/IMG_0709+flower+collage.jpg" /></a>

That's all to it!

(B) Remove borders from ALL uploaded images in Blogger blog posts (past and future photos) :

either
(i) via Blogger's Layout | Fonts and Colors :

Go to your blog's Dashboard | Layout | Fonts and Colors
Change the Border Color to be the same as the color of Page Background Color and click the Save Changes tab when done.
Note: This will make ALL BORDERS invisible, besides those around all the photos. Ignore this method and choose the next method (ii), if you want borders removed only from your uploaded photos and not elsewhere.

or
(ii) via Blogger's Layout | Edit Template :

This will be done by modifying the blog's template very marginally.
Go to Dashboard | Layout | Edit Template
Scroll down or CTRL F to find the code .post img { and then locate border:1px solid $bordercolor; below it. Change the later to border-style:none;
Finished...all borders around uploaded images, the past and future, will be removed forever!

Easier than ABC, right? And, this is how the photo appears, borderless, after changes made above :

Photo collage of flowers in our garden, November 2009

Learning, experimenting and acquiring knowledge...and then sharing them is so wonderful and enjoyable! Such fun and keeps me smiling! :-)

Update: 18 October 2010
If your blog is using Blogger's new Template Designer, then you'd need to add custom CSS to remove border and shadows around your images. Refer to my other tutorial at 'Add CSS in the Template Designer'.