Using box-shadow to create inner border for image

Question

I am attempting to create an inner border to an image using box-shadow. I'm using code I copied from a CSS generator and it does not work on my image. How can I get this code to work with my image?

I am trying to make a top and a bottom border only. No sides.

http://codepen.io/trevoray/pen/NPxyzG

.bannerImages {
 -webkit-box-shadow: inset 0px -17px 0px 0px rgba(0, 0, 0, 1);
 -moz-box-shadow: inset 0px -17px 0px 0px rgba(0, 0, 0, 1);
 box-shadow: inset 0px -17px 0px 0px rgba(0, 0, 0, 1);
}

<img class="bannerImages" src="http://webtest-community.canoo.com/wiki/space/SnipSnap/config/webtest_tag_rgb_pos_small.jpg" />

• somethinghere: Whyt not user border: 1px solid #000 and box-sizing: border-box?
• Paulie_D: See- designbystevie.com/2011/03/…
• trevoray: Paulie_D, I'm attempting to create only top and bottom border.
• Jordan Gray: Are you actually creating a box shadow, or are you just wanting a solid border that overlaps the image? If it's the latter, you might want to consider different approach; Farhan's box-shadow solution can easily be adjusted to work with just borders. :)

Answer 1

You can use outline to get a border inside the image

.bannerImages {
 outline: 1px solid red;
 outline-offset: -4px; 
}

<img class="bannerImages" src="http://webtest-community.canoo.com/wiki/space/SnipSnap/config/webtest_tag_rgb_pos_small.jpg" />

More info: http://caniuse.com/#search=outline

• trevoray: I can't use outline because I want a top and bottom border. Not an entire border.

Answer 2

Here's how. The trick is to wrap your image in another element and use an absolutely positioned before pseudo-element.

• trevoray: Farhan, that is close, but I'm also going to be adding a top border of same width. How do I do that with your solution?
• Harshul Pandav: change the 'box-shadow' to 'box-shadow: inset 0px -3px 0px 0px rgba(0,0,0,1), inset 0px 3px 0px 0px rgba(0,0,0,1);'
• Farhan Chauhan: link just play with box-shadow in before of imgContainer class. check my link to get better idea.

Answer 3

The problem with using an inset box-shadow on an image appears to be that the shadow is rendered behind the image.

If you really have your heart set on using a box-shadow, you will need an image with a transparent background... (Convert your jpg to png and delete the background)

.bannerImages {
 -webkit-box-shadow: inset 0px 7px 10px -4px #000 inset, 0px -7px 10px -4px #000 inset;
 -moz-box-shadow: inset 0px 7px 10px -4px #000 inset, 0px -7px 10px -4px #000 inset;
 box-shadow: 0px 7px 10px -4px #000 inset, 0px -7px 10px -4px #000 inset;
}

<img class="bannerImages" src="https://i.sstatic.net/rCgfw.png" />