Skip to page content or Skip to Accesskey List.


Main Page Content

Css Image Border Rollovers

Rated 3.71 (Ratings: 24)

Want more?


Member info

User since:

Articles written: 0

CSS Image Border Rollovers

The prevalence of CSS2 enabled browsers has opened up a variety of methods and techniques for the visual enhancement of HTML pages. Used correctly, it can also enhance page useability, and improve download times. Using a simple CSS structure, inline images can benefit from the same "mouseover" effects that have struck text links over the past couple of years.

As the :link, :hover, :active and :visited selectors have been applied to text hyperlinks, these can also be extended to hyperlink <IMG> tags. At their most basic level, we can provide a visual confirmation of a link, and that this link is active, by changing the border color of the required image.

Apply a class of (for example, as I first used this technique on a photogallery) fotgal to an image that is used as a hyperlink:

Apply the CSS classes:

.fotgal {border:1px; border-thickness: 1px; border-color: #000; border-style: solid;}

This firstly establishes any element with a class of fotgal with a 1 pixel black border.

Then compound this with:

A:hover, A:active {color: #fff}

A:hover .fotgal, A:active .fotgal {border:1px; border-thickness: 1px; border-color: #fff; border-style: solid}

This, in a nutshell, will instruct the browser to change the border colour of the element, upon hover or active.

Here's the full source code:

src="" width="121"

height="43" border="0" vspace="2">

src="" width="121"

height="43" border="0" vspace="2">

src="" width="121"

height="43" border="0" vspace="2">

src="" width="121"

height="43" border="0" vspace="2">

Or, you can download it here.

My first real-world example of this can be seen here.

Reasons for using this method???

  • Avoid the use of bandwidth-heavy javascript rollovers (only 1 image download instead of two).

  • Performs well under IE4+, degrades very gracefully under other browsers.

  • Provides a clear visual connection between hyperlink and active area.

Aside from just changing the border colour, this can be extended to using IE filters (alpha etc), although this does not have the near-immediate feedback/response that the border-colour change has. A variety of effects can be exploited with this technique.

I'd welcome seeing other uses/variations of this technique, email me at

The access keys for this page are: ALT (Control on a Mac) plus: is an all-volunteer resource for web developers made up of a discussion list, a browser archive, and member-submitted articles. This article is the property of its author, please do not redistribute or use elsewhere without checking with the author.