Question

I’m trying to create a border that sits INSIDE an image. So, there should be a 10px or so margin from the edge of the photo to where the border is.

Examples of what it should look like: https://i.stack.imgur.com/K5pBy.jpg

You can see the page with the photos here: http://blueboxluxe.com/praise/

Anyways, few parts of this is harder to do… 1) the layout is fluid — the photo size can change. 2) I want the border to show up on all photos — no matter the size. 3) On the praise page, there’s a lot of floats happening; so, things need to work with that correctly.

I’ve tried playing with box-shadow, but all I get is a border on the outside of the image. Not inside.

Answer 1

Try the outline property and specify a negative offset:

outline:2px solid red;
outline-offset:-15px;

No IE support though!