If you feel generous:
Got it working in IE now (tested only in IE6). The thing is IE treats borders rather as outlines, but only on a display level. It substracts the border's width from the element's and all, gets the box model right, but just fails to display it properly.
That being said, I have approached the problem from an outline point of view. For IE you need to match the color of the background of the img element (or whatever element you want to stamp), unlike the FF or Opera, where you target the background color of the border to the background color of the parent element of that img.
On another note, IE displays the dotted border exactly as dots, therefore we need to use dashed instead in order to get the stamp look. In case you are confused with the CSS here, I have added some special rules for IE.
In the first example I have changed the border's color, and in the second (or third to be more specific, the IE-only one) I have messed with inheritance a little bit in order not to add more markup. (Yes, I am a lazy bastard, had a few beers, just got home.)
Anyway, for the IE-only example I have changed the outline into border and also fixed the colors.
You'll notice if you play around with the border's widths and experiment, you will probably get better results in IE as far as symetry goes and the corners are just much much better in IE.
31.Jan 2006: Revised the technique, due to me comming up with it in the wee hours of the night I have overseen the possibillity to achieve the same effect against both dark and light backgrounds with both outline and border. (Go figure...) :)
I have also included the source codes for each example.
The only difference between outline and the border methods are that the border “takes out of the padding” while the outline just builds onto it, and IMHO makes better corners. While the border method requires the border to be the color of the parent-element's background, the outline method needs the outline to match the image's background color (the one that is revealed via padding on the img).
In this example we have used the CSS poperty border to achieve the “stamp look”. Here have a light background and our border which is white is contained inside the element.
.border{
border:5px dotted #fff;
padding:4px;
background:#ccc;
}
In this example however we have gone with the outline property, in this example we are against a dark background and with a white border (or should I say outline). As we know, outlines are not accounted into element's width therefore they are pushed outwards.
This doesn't work in IE because it doesn't support the outline property.
.outline{
outline:5px dotted #fff;
padding:4px;
background:#fff;
}
Since IE cannot understand outline, here we have an example of the technique solely for IE on a dark background with the border property. IE needs to use dashed instead of dotted.
.border{
border:5px dashed #fff;
padding:4px;
background:#fff;
}
Unfortunately this technique is (to my knowledge) impossible to reproduce in IE due to it's weird (how suprising) rendering of borders and padding.It's working now, refer to the top of the page, read the rest of this paragraph if you want a deeper explanation on IE's rendering of borders and padding.
This you can clearly see in the examples below, for some reason IE won't expand the padding “beneath” the border so to say, and as a result you get a quirks-mode-outline-broken-box-model property looking sorta thing.
In lamens terms, IE gets the box model right (since it is in standards compliance mode here), it just displays the element like the border is not within it, which on the other hand you you get to see only when you use dotted or dashed borders.
In the examples below you can see the borders and outlines so you can se what is exactly going on, assuming you are using a propper browser. (In which I'm sure of.)
If you feel generous: