Question

Given a photo like so:

How can I apply an inner stroke as seen below which in photoshop is done with an inner shadow? Suggestions?

Answer 1

There’s an inset property on various browsers’ box-shadow attributes that makes it behave much like Photoshop’s “inner shadow”. You’ll need to create an element on top of your image with the same size and appropriate corner rounding attributes (border-radius, -webkit-border-radius, -moz-border-radius), then apply the shadow to it something like this:

-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);

(note edits; I fiddled with it a bit and it turns out the shadow gets drawn beneath any actual content of the element, so you’ll either need to apply the shadow to an element that’ll be layered on top of the image or put the image in the background of the element that has the shadow applied to it)

(further edit: a working JSfiddle example.)