View Full Version : Adding a border around images...

04-01-2007, 08:32 PM
Hi everyone, I was wondering if anyone knew an easy way to add a "Border" around an image in CSS.. the webpage is http://www.brownagencies.com/ (goto portraits / click the image) I got some of the problems resolved by using a table but I wanted a hover command to add in a clearish border.

Thanks for any help!

04-01-2007, 08:39 PM
Are talking about a swap image? Basically you want the border to change as you roll over the thumbnail, right? I think the easiest way to accomplish this would be to use the swap image function, you could probly get it to work with an on roll-over and change the border style, but it seems that would be a bit involved for something you could acheive by swapping the image.

04-01-2007, 10:38 PM
I was thinking about that, but with the css I cant.. or rather dont want to have to go back through each image.. I just added a border around it and after the hover it removes the border so it gives the same effect.. I just saw on some websites that they have like a hovering border that follows the images, that would be cool

04-02-2007, 11:39 AM
You should be able to assign borders to the images in question and alter their appearance from color to transparent with the :hover pseudoclass just fine; something like this:

img {
border: 2px solid #000;

img:hover {
border: 2px solid transparent;

(Do note that IE prior to 7 does not support the :hover pseudoclass on anything but a elements; you'll need an additional trick to get IE<7 to play along).

Why don't you show us what you've come up with sofar so we can steer you in the right direction?

04-02-2007, 04:55 PM

04-04-2007, 12:46 AM
can you provide a link to the "hovering border that follows the image" so we can have an idea as to what you are trying to achieve.

I Think I know what you are going for, but as ronald said, you are going to have a bear of a time getting it to display uniformly across browsers. Now this isn't much of a problem if you know the browser make and version of your visitors, or offer a browser detect and browser download link for those not using the proper browser, but as you can guess this creates its own issues.