Умный способ добавить изображение угла к границе DIV на всех четырех углах

Мой дизайнер разработал рамку с ромбовидной формой на углах границы. См. Изображение ниже.

Я бы хотел сохранить форму ромба как изображение, создать сплошную границу размером 1 пиксель и затем разместить ромбовидную форму абсолютно точно в четырех углах. Хотя это работает, я уверен, что есть более умный способ сделать это без дополнительной разметки.

Может быть, использовать что-то вроде: after в css? Как бы мне это сделать или есть способ лучше? Мне нужно, чтобы это было совместимо с IE8 +, но если оно работает с IE7 +, даже лучше.