Helpful Information

Category: HTML & CSS

How to set border color for Image?

Hello,

Can we set border color like that:

<img name="img01" src="myimage.gif" border="3" bordercolor="#ff0000">

Thanks,
Tuy Le

style="border-color:#ff0000"

Hi,

Thanks for your reply. But it only work in IE. I want it can run well in both of IE and NS

Thanks

To get a colored border that is cross-browser you could wrap your images in an <a> tag, Use CSS to set the color and to keep it seperate from the color of your other links. For example:

<a class="imgbord" href="javascript:;"><img name="img01" src="myimage.gif" border="3" bordercolor="#ff0000"></a>

Then you specify the border color by defining a 'class' using CSS in the <head> section of your page.

<style type="text/css">
A.imgbord:link {color: #ff0000;}
A.imgbord:active {color: #ff0000;}
A.imgbord:visited {color: #ff0000;}
A.imgbord:hover {color: #ff0000;}
</style>

The above would give your image a red border. You still specify the width of the border in your image tag ;).

"boxer-1", I would like very much to say to U >>THANKS!!!<<:thumbsup:

I was wondering how to make the images on my index without the ugly link color, and U did help me a lot!

I did change some the info U gave here, but worked fine!

1 step)
I did input the bellow on my <head> index:

<style type="text/css">
A.imgbord:link {color: black;}
A.imgbord:active {color: black;}
A.imgbord:visited {color: black;}
A.imgbord:hover {color: black;}
</style>

2 step)
On each image I needed to type the bellow (then worked):

<a class="imgbord" href="http://igspot.ig.com.br/pati_weber"><img name="img01" src="myimage.gif" border="0" bordercolor="black" ALT="Bio"></a>

Coments:
I know mayB still have some erros, of course, but somehow did remove the link color from my image. So looks beautiful now with the background I did design!
I needed to put "border="0" to function also, what does it means at all???

Anyway, check out my index and see that I made it!!!

Again: Thanks fella!

Pati.
:)

You're welcome Patricia, glad it was helpful to you :thumbsup: ! Hmm, am I understanding you right...all you wanted to do is remove the border around any images you have wraped in an anchor (<a>) tag?

If so, all you really need to do is this:

<a href="http://igspot.ig.com.br/pati_weber"><img name="img01" src="myimage.gif" border="0" ALT="Bio"></a>

The above is completely cross browser and you can eliminate the 'class', the CSS coding, and the border-color ;). It will cause any images to have no border, whether the image is linked or not. Could save you a lot of coding as well as page weight. Maybe I'm misunderstanding what you are trying to accomplish though. Good luck to you ;).