title: Smart way to add corner image to DIV border on all four corners
body: <p>My designer has designed a border with a diamond shape on the border corners. See image below.</p>
  
  <p><img src="https://i.stack.imgur.com/3RsZ2.jpg" alt="Diamond Border"></p>
  
  <p>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.</p>
  
  <p>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.</p>