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:

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 :)

Comments

[Eric Hotinger]

See here: stackoverflow.com/questions/9051228/css-inner-border And a working solution of what you want: jsfiddle.net/ThinkingStiff/bNmzB

[cimmanon]

@EricHotinger Those answers only work with a solid "background", not a pattern.

[Eric Hotinger]

@cimmanon - does he not have a solid background? I see no patterns.

[cimmanon]

@EricHotinger The image itself is a pattern. Try your demo using an actual image and see that it doesn't work.

[Eric Hotinger]

@cimmanon the post I linked has another answer which uses a background image as well... I chose one of the answers which had a JSFiddle representing the same white inner border he had.

[Eric Hotinger]

I like this despite the backwards compatibility problems. Nice one.

[user2369812]

this would be my preferred option but we have mostly internet explorer in-house. is there any alternative for example using JavaScript? The other examples all seem to require you to specify the image size. I would like this automatically applied to all images.

[cimmanon]

That might be something better asked as a new question. Essentially, you'd need to do what the other answers are doing: creating an extra element dynamically and applying the border to that. I've added an alternate solution that uses an additional element and doesn't require knowing the dimensions of the image. If it were me, I wouldn't go through the hoops to support those browsers because it is a minor cosmetic effect.

[Éric]

The jsFiddle is broken. A fixed version is at jsfiddle.net/089vtcfx . I could notice that, in Firefox 87.0, the effect is not as wanted by the OP.

[nkmol]

@Éric This is an old answer :) You are right. Adding background-size: cover; should fix this. See jsfiddle.net/zhs57eyg