I don’t think you can do negative margins on borders for one. Margin as well as border are outside the box model and you can’t do negative padding either. Negative margins will only move it up, down, left or right.
Utilizing Jeffrey’s how-to from nettuts, I just added :hover to the :after pseudo-element and it works for me. When I hover over #box I get a border inside. It works in all new browsers, but not IE6 or IE7.
Thanks everyone, it seems the only way to get a border inside an image on rollover is to try something like @Raspo’s link; trouble is I was looking to have inner borders on each of my portfolio images and with that amount of code for each image just to get an inside border I don’t think it’s worth the time/extra weight in my page(s).
Also, there’s a quirk in my design anyway, even with a normal border the images fall out of their list placements (next to each other)…all in all I can’t be bothered. Another seemingly simple thing that is just too techy and boring
Surely just using an inner box shadow (CSS3) will sort out this issue?
If you are worried the box will then look smaller on hover (with the inner border) you would have to change the dimensions on hover to increase the width/height of the element by 1px either side OR add a nasty -1px margin on all sides on hover as mentioned by @agentfitz.
You cannot place an inner shadow on an image because it falls behind the content layer, but above the background layer. You can however wrap the image in a div and set the img zindex to -1 then the shadow will overlay the image.
Or simply wrap the image in a div and use pseudo content to generate a box absolutely positioned over the image and matched to its width height. You cannot do this directly on an image because images cannot have pseudo content.