Adding or Removing Link Borders Around Images

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.

See Also
girl in black dress figurine

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 .

Feeling stuck in self-doubt?

Stop trying to fix yourself and start embracing who you are. Join the free 7-day self-discovery challenge and learn how to transform negative emotions into personal growth.

Join Free Now

Picture of Lorelle VanFossen

Lorelle VanFossen

The author of Lorelle on WordPress and the fast-selling book, Blogging Tips: What Bloggers Won't Tell You About Blogging, as well as several other blogs, Lorelle VanFossen has been blogging for over 15 years, covering blogging, WordPress, travel, nature and travel photography, web design, web theory and development extensively as web technologies developed.

RECENT ARTICLES

TRENDING AROUND THE WEB

4 zodiac signs who are known to be the most physically beautiful

4 zodiac signs who are known to be the most physically beautiful

My Inner Creative

If you’ve lived through these 8 experiences, you’re mentally stronger than the average person

If you’ve lived through these 8 experiences, you’re mentally stronger than the average person

Hack Spirit

7 myths about introverts people need to stop believing

7 myths about introverts people need to stop believing

NewsReports

People who always assume the worst usually share these 8 pessimistic thinking patterns

People who always assume the worst usually share these 8 pessimistic thinking patterns

Global English Editing

5 zodiac signs that will experience a deep emotional healing in 2025

5 zodiac signs that will experience a deep emotional healing in 2025

Parent From Heart

People who pretend to be successful but are actually struggling to get by often display these behaviors

People who pretend to be successful but are actually struggling to get by often display these behaviors

Hack Spirit