How can I show a hyperlinked image with two different size/color borders around it?

Question

I'm trying to figure out the css to display an image with a 1px black border then a 9px white border around that. Is there an easy way to do this?

The div around image answer almost works, but I still have big gaps on either side of my image (outside of the 1px border and inside of the 9px border). It seems like the div tag is stretching to fit the entire window for some reason.

I ended up using the padding/border in img styling option.

Answer 1

<div style="border: 9px solid white;">
    <img src="foo.png" style="border: 1px solid black;"/>
</div>

Answer 2

You can't assign multiple borders with pure CSS, you're gonna have to put a div around it. Div because it's block-level.

Something like

<div class="img-border"><img class="img" src="..." /></div>

and the CSS would be:

.img{
  border: solid 1px black;
}

.img-border{
  border: solid 9px white;
}

Using classes, you don't have to re-type the inline CSS for every single image. That's what I've come up with in 30 seconds. Hope it helps.

Answer 3

On img, set the background to black and add 1px of padding then the border can be the 9px of white.

img { background-color:#000; padding:1px; border:9px solid #fff; }

This will give a double border as long as you don't have transparent images.