How to get a white outline around an image in CSS

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.

Answer 2

Just using the border property should do what you want:

border: solid white 4px;

So long as the only part needing the border is the outer edge (of the rectangular image), that will surround it about as shown. You may want to modify the box-sizing, if the border should cut into the image; but for padding, the defaults will work.

The border will work on the <li> or <img> tags, depending on how you want to lay the image(s) out (<li> will allow multiple images with no border between them).

Adding padding to the class will have a similar effect, but behave differently with regard to the box used for sizing and positioning the element. Padding on the <li> will have a very close effect to a proper border on the <img>, but placing the border on the <img> itself may simplify your CSS.