Smart way to add corner image to DIV border on all four corners

Question

My designer has designed a border with a diamond shape on the border corners. See image below.

Answer 1

For a solution that's widely compatible, I think you should use four elements with position: absolute combined with position: relative and negative offsets:

See: http://jsfiddle.net/M4TC5/

@meo's demo using transform: http://jsfiddle.net/M4TC5/2/
(and my demo: http://jsfiddle.net/M4TC5/1/)

That really just shows the concept, you can generate better transform code (that doesn't look slightly "off" in IE) with this tool: http://www.useragentman.com/IETransformsTranslator/

HTML:

<div class="image">
    <span class="corner TL"></span>
    <span class="corner TR"></span>
    <span class="corner BL"></span>
    <span class="corner BR"></span>
    <img src="???" />
</div>

CSS:

.image {
    position: relative
}
.corner {
    position: absolute;
    background: url(???);
}
.TL {
    top: -10px;
    left: -10px
}
.TR {
    top: -10px;
    right: -10px
}
.BL {
    bottom: -10px;
    left: -10px
}
.BR {
    bottom: -10px;
    right: -10px
}