image with special border (without width)

[rufus]

how can i get this kind of border :

http://www.picdo.net/Fichiers/6262862d6135ab93343c77027e43c02/blocSable_b_2595.jpg

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.