CSS box-shadow & margin

Question

I have added CSS box-shadow to <img> in a blog post. The imgs have max-width:100% set so that they fill the column when it is resized.

The shadow spills out into margins due to box-shadow rendering outside of border in the CSS box model. I want to give the images some extra margin so that the shadow sits inside of the column. However if I use margin this will make the imgs wider than the column.

Is there a nice way to make the shadow sit inside without affecting the width as above? Thought of wrapping in another element but it's a shame to do that.

If I had used solid borders I could have used box-sizing:border-box; to achieve this but it doesn't have any bearing on box-shadow?

Answer 1

How about max-width 98% or alightly lower and then the shadow should be just inside?