title: CSS Hollow out a div?
body: <p>I have a 3 elements stacked on top of each other. The top element is the overlay content. The second element is a background border image. The bottom element is a background.</p>
  
  <p>What I want to do is hollow out the middle element, so that I can see through the top element into the bottom element, but leave the border of the middle element surrounding the top element.</p>
  
  <p><a href="http://jsbin.com/unimux/4/edit" rel="nofollow">http://jsbin.com/unimux/4/edit</a></p>
  
  <p>As you can see the middle element is blocking the view to the bottom element.</p>
  
  <p>Edit: I did try using border-image but it wouldn't render correctly for me with border-radius.</p>
  
  <p>Edit2: is it possible to get the desired effect with border-image? Kudos to anyone who can make it look not terrible with border-image.</p>
  
  <p>Edit3: Some progress based on Zuul's answer:
  <a href="http://jsbin.com/unimux/15/edit" rel="nofollow">http://jsbin.com/unimux/15/edit</a></p>