Inner border over images with CSS?

Question

I would like to add a white border over all my images in my content div using css. Images in the header and footer div areas should not be affected. how do I achieve this? See example image below. There are images of different sizes on the web pages.

See image:

Answer 1

You can do this without having an extra element or pseudo element:

http://cssdeck.com/labs/t6nd0h9p

img {   outline: 1px solid white;   outline-offset: -4px; } 

IE9&10 do not support the outline-offset property, but otherwise support is good: http://caniuse.com/#search=outline

Alternate solution that doesn't require knowing the dimensions of the image:

http://cssdeck.com/labs/aajakwnl

<div class="ie-container"><img src="http://placekitten.com/200/200" /></div>  div.ie-container {   display: inline-block;   position: relative; }  div.ie-container:before {   display: block;   content: '';   position: absolute;   top: 4px;   right: 4px;   bottom: 4px;   left: 4px;   border: 1px solid white; }  img {   vertical-align: middle; /* optional */ }