Adding or Removing Link Borders Around Images

Filed as Guides on May 18, 2007 12:57 pm

Example of using a linked image without any indicators in the CSS styleOn your blog’s design or WordPress Theme, do you have borders around images inside links?

Some designers put borders around linked images as an indicator to the reader that this is a link, and yet many readers understand pretty quickly when an image is a link and when an image is just an image. So why bother?

Whether or not an image is styled differently when it’s a link is up to the designer and to you. You can set it however you wish that works best with your blog’s design and identity.

The image is set with the HMTL tag img and can be styled with and without borders, inside and outside of links. For this tutorials, let’s limit ourselves to link borders around images.

Link tags, known as anchors have three basic states:

  • Active: Just waiting to be clicked.
  • Hover: The mouse moves over in anticipation of the click.
  • Visited: Been clicked.

In CSS, the styles for these states would be:

a, a:active {...}
a:hover {...}
a:visited {...}

If these were text links, they might be set to have a different font color in each state:

a, a:active { color: blue }
a:hover { color: red }
a:visited { color: green }

The text link would change depending upon the user interaction, changing to red if the mouse hovers and green to indicated a visited link.

Example of text links with color change on hover style

A linked image can have similar indicators in a border around it:

a img { border: 1px red solid; }
a:hover img {border: 1px blue solid; }
a:visited img {border: 1px green solid; }

Example of linked image with border style of red

When the image sits on the page, the border around it would be red. When hovered over, it would turn blue, and after visiting, the border would be green.

A border around a linked image, however, can look really ugly, forcing a colored box around an image that might not need a box. If you still want an indication that the image is a link, you can set the active and visited link state to “no border” and only show the border when the mouse hovers over the image.

a img { border: 0; }
a:hover img {border: 1px red solid; }
a:visited img {border: 0; }

The red border color might jump out too much, so you can change it to black or gray or whatever color would stand out while complementing your blog’s design.

These styles set the border state for all images on your blog. If you would like the linked images only within the post content area to have a border around them, and/or the linked images within your sidebar to have a different border, or no border, you need to set the image styles for each container, such as:

.content a img { border: 1px blue solid; }
.content a:hover img {border: 1px red solid; }
.content a:visited img {border: 1px green solid; }
#sidebar a img { border: 0; }
#sidebar a:hover img {border: 1px navy solid; }
#sidebar a:visited img {border: 0; }

There are many ways to customize the look of images to indicate links, including adding a background color when the image is hovered over such as:

.content a:hover img { border: 0; background: red; }

Example of linked image with border on hover style

To turn off all borders around linked images, which is the preferred method as borders around linked images tend to add clutter, simply set the border to zero around the images and linked images:

a img { border:0 }
img { border:0 }

Example of linked image with no border style


Lorelle VanFossen blogs about blogging and WordPress on .

Tags:

This post was written by

You can visit the for a short bio, more posts, and other information about the author.


Submissions & Subscriptions

Submit the post to Reddit, StumbleUpon, Digg or Del.icio.us.

Did you like it? Then subscribe to our RSS feed!



  1. By Tony Hung posted on May 18, 2007 at 5:29 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Ok … ok … it was on our list for a long time to actually do, and we’ve done it! :)

    Incidentally, what’s interesting is that from a CSS point of view, the sequence *does* matter.

    Previously we had something like:
    img a { border:0 }

    … and actually, it didn’t register.

    on the other hand:
    a img { border:0 }

    actually *does* work. ;)

    PS Many thanks to Brian “Theme Ninja” Gardner who worked out this kink

  2. By Lorelle VanFossen posted on May 18, 2007 at 8:04 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Glad this is fixed here, and you are right about the sequence. It does matter.

    There are a lot of WordPress Themes and blog designs with the border around the linked image, so the Blog Herald isn’t alone. But I’m glad it’s changed.

    As for the rest of you out there with borders around your images, or not, how it is going for you?

  3. By pelf posted on May 19, 2007 at 9:52 am
    Want an avatar? Get a gravatar! • You can link to this comment

    I intentionally put borders around my images because I think the images look better that way (it’s just my own perception anyway) :)

    Linked or not, the border colour remains the same, because I believe, like it or not, readers will automatically mouse over images to see if it’s linked (just like how I do it naturally).

  4. By Lorelle VanFossen posted on May 19, 2007 at 11:00 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Some do, some don’t. I think the key is having enough space around the images so they aren’t confined. A border around an image looks like a frame, but it needs that matting. ;-)

  5. Weekly Digest: Starting Edublogs Magazine, Blogging Big and Small, and More « Lorelle on WordPressFebruary 3, 2008 at 8:41 pm