CODEWITHSUNDEEP
htmlcss
trevoray
trevoray

Reputation: 317

Using box-shadow to create inner border for image

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" />

Upvotes: 1

Views: 11853

Answers (3)

apaul
apaul

Reputation: 16170

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" />

Upvotes: 1

Farhan Chauhan
Farhan Chauhan

Reputation: 585

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

Upvotes: 1

Harshul Pandav
Harshul Pandav

Reputation: 1036

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

Upvotes: 4

Related Questions