About   All Tips   Tips by Category   Tips by Ability   Help!

Removing Borders from Post Images

Not too long ago, I showed you how to modify your template to make a border automatically appear around the photos in your posts. The only problem is that it puts a border around every single image in the posts, even the images that are not photos (buttons, signatures, etc.). The built-in border looks good around a lot of stuff, but there are some things that you just don’t want a border around.

I recently discovered an easy way to remove the border from individual images. You’ll still have your built-in border around all images, but with a little post html tweaking, you can take the border off single images in your post. Cool!

This tip is for those of you who have already modified your template for built-in borders around your post photos. Click here for the photo border tutorial (intermediate).

How to remove a border from an individual post image/photo/button:

1. Upload the photo to the post.
2. Click on the ‘edit html‘ tab.
3. Locate the html code for the image that you wish to be borderless. Add the following code behind the URL (web address) of the image:

style="background: none repeat scroll 0% 0% transparent; border: 0pt none ! important;"

For example:
I have built-in borders on my blog. A solid 4px black line is automatically added to every photo/image in my posts. When I uploaded my new button to this post, it automatically looked like this:

Sneaky Momma Blog Design

I really don’t like the extra black line around my button, so.....

Here’s what I did to take it off:

1. I located the button html after clicking on the 'edit html' tab. Feel free to grab this code to display my new button in your sidebar (shameless self-promotion!)

<center><a href="http://sneakymommablogdesign.blogspot.com/" target="_blank"><img src="http://i409.photobucket.com/albums/pp178/sneakymomma/buttonflwr4.png" alt="Sneaky Momma Blog Design" border="0" /></a></center>

2. I copied the code from step 3 above and pasted it directly after the quotation mark behind the URL of the image (not my blog URL):
<center><a href="http://sneakymommablogdesign.blogspot.com/" target="_blank"><img src="http://i409.photobucket.com/albums/pp178/sneakymomma/buttonflwr4.png" style="background: none repeat scroll 0% 0% transparent; border: 0pt none ! important;" alt="Sneaky Momma Blog Design" border="0" /></a></center>

Sneaky Momma Blog Design

Voila! A border removed from an image in a post formatted w/built in borders!

Troubleshooting: If this does not work for you, try experimenting with the placement of the added code. All button codes do not look the same. Your no-border code may need to go somewhere else.

Related post:

It absolutely makes my day when this blog is linked to and mentioned in a post on another blog. I love seeing my buttons on other blogs and get downright giddy when I see Sneaky Momma Blog Design on a blog list. BIG thanks to all of you who have helped spread the word about my tips!

Please do not copy and paste my tips and/or images into your own posts. I work hard on my posts and would like for them to remain on my blog only. Thank you for your cooperation. :)


joseph said...

This is exactly what I've been looking for! Thank you!