image with special border (without width)

[rufus]

how can i get this kind of border :



with no border added to img , only with span or div
I don't know at all image width and I cannot know it (for a photo forum or members galleries with no size limit)

something like

<div class="bord2">   
<div class="bord1">      
<img src="image.jpg" alt="" />   
</div>
</div>
.bord1{
border:4px solid #ffffff;text-align:center;
padding:30px;background-color:#dddddd;}
.bord2{border:2px solid #000000;text-align:center;padding:0px;}

if you know how to do it ??
thank you

[Medyman]

What's wrong with what you have there?

to get rid of the border around the image:

img { border-style:hidden; }

[BLiZZaRD]

CSS:

 img { border: 6px solid red; }
span {
border: green solid 5px;
width: auto;
float: left; }

<span><img src= "main.jpg"></span>

If you want a third color, add padding and make that third color your page background as it will show through Adjust the border sizes and colors to suit your needs.

[rufus]

thank you BLiZZaRD !
it works fine in that way but I am getting a strange padding-bottom (4 or 5 pixels ?) with safari, opera and firefox, not with IE but who cares for IE ? :-)

I have to add to the span
font-size : 0px; and it is great !!

[BLiZZaRD]

Glad it works, sorry I left out the span fix, it happens as a result of the auto width attribute for some reason. Good catch.