Question

I’m trying to style an image with a white border around it like in the following:

If I did:

 <ul class="learn">
    <li class="thumbnaile" > <img id="portrait" src="/assets/allyson.jpg" class="stretch" />
    </li>
 </ul>

…then add padding to .thumbnaile…

Is there a better/ more efficient way of doing it than this?

Answer 1

You could either use border (which is certainly the obvious choice), but there’s also padding and box-shadow:

img {
    background-color: #fff;
    padding: 4px;
}

JS Fiddle demo.

In this example the img element is padded by 4px, which allows the background-color to extend out from ‘behind’ the image.

img {
    margin: 4px 0 0 4px;
    box-shadow: 0 0 0 4px #fff;
}

JS Fiddle demo.

Because box-shadow doesn’t displace the element the margin is required to allow for the box-shadow to show on all sides.