Removing the Ugly Blue Border Around Images

I think we’ve all been in this position where we want to show our images yet when hyperlinked (or because of the css code), we end up with ugly borders (usually blue). I’ve noticed it on this theme and will now have to make the changes…grrr.

In wordpress, the image properties has a section called “border” in the advanced tab of the image settings area. By simply putting a 0 (zero) in the box and saving it you’ll remove the border, sometimes, and depending on your theme.  Personally, I’m not a fan of  Wordpress’s image features, infact, besides what I’m showing you here, you should also check out my post on How to Wrap Text Around an Image so you can nicely position your images without many of the hassles I’ve come across by using the wordpress image settings.

So, if you’re in a situation where you need to physically change the html code, here’s what you do:

Below is a typical image code:

<a href="http://www.yoursite.com"><img src="http://www.creativedesignworx.com/images/remove_blue_border_sample.gif" alt="" width="250" height="250" /></a>

Which would produce this:

This is your image (summer_flower.jpg) hyperlinked to www.yoursite.com,  and leaving it this way will likely create a blue border around your image.

Now, by simply adding this little snippet into your image code, you’ll be able to remove the border:

style="border: 0pt none;"

<a href="http://www.yoursite.com"><img alt="" /><strong>style="border: 0pt none;"</strong> src="http://www.creativedesignworx.com/images/remove_blue_border_sample.gif" alt="" width="250" height="250" /&gt;</a>

Now you see…no border!

That’s it! Easy as pie:)

Update - I’ve created a really quick video to explain the wordpress image properties as I talk about in the beginning of this post
(Note, it’s not the greatest as I’m just learning a new video software, but as I go along my videos should get better:)