My designer has designed a border with a diamond shape on the border corners. See image below.
The way I'd go about achieving this would be to save the diamond shape as an image, create a 1px solid border and then place the diamond shape absolutely positioned on the four corners. While this works I'm sure there is a much smarter way to do this without the additional mark up.
Maybe using something like :after in css? How would I do this, or is there a better way? I need to have this compatible with IE8+ but if it works with IE7+ even better.