How to add border around image without destroying layout?

Question

Site: is here

picture html:

<img alt="" src="UserFiles/Image/galerie/12970854473D-Eco-60.jpg">

when I add border: 2px solid black; to the image

layout breaks...

Answer 1

The only straight-forward solution to your problem that I can see is

outline: 2px solid black

which is layout neutral. However, it doesn't work in IE < 8.

Answer 2

For the record, an alternative:

border: 2px solid black;
margin:-2px;

First you add 2px to all sides, and then you pull them back in with the negative margin.

Answer 3

You can use CSS Clip, and apply the border around the clipped image;

I tried using margin: -2px, but it did not work for me.

Warning, CSS clip is pretty counter intuitive, and while it shares the a similar shorthand for margin and padding, it's pixel value assignments are extremely different compared to margin or padding.

Here are some helpful links;

1. Covers outline, and negative margin fix http://css-tricks.com/2368-image-rollover-borders-that-do-not-change-layout/

2. CSS Clip http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html