Inner border over images with CSS?

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:

Solution 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 */
}

Solution 2:

You could try this:

Html:

<div class="image">
  <div class="innerdiv">

  </div>
</div>

Css:

.image
{
    width: 325px;
    height: 239px;
    background: url("https://i.picsum.photos/id/214/325/239.jpg?hmac=7XH4Bp-G9XhpuKz5vkgES71GyXKS3ytp-pXCt_zpzE4") 0 0 no-repeat;
    background-size: cover;
    padding: 10px;
}

.innerdiv
{
  border: 1px solid white;
  height:100%;
  width: 100%;
}

jsFiddle

Hope this is what you meant :)