title: css cut-out border/shape around element
body: <p>I'm not even sure this is possible, I'm looking to make a see-trough "border"/cut-out around an element. Like in the image below, the point is to make the background show between the magenta element in the centre and the grey elements.  </p>
  
  <p><a href="https://i.stack.imgur.com/nxOtI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nxOtI.png" alt="desired result"></a> </p>
  
  <p>So far all I have managed is a solid colour border around the magenta element. Using the following class, this gives me the desired result but only on a white background.</p>
  
  <pre><code>.app.center {
    height: 40px;
    width: 28px;
    z-index: 5000;
    border-radius: 3px;
    box-shadow: 0 0 0 3px white;
  }
  </code></pre>
  
  <p>See this <a href="http://jsfiddle.net/L6deaazy/1/" rel="nofollow noreferrer">fiddle</a> for my entire CSS. </p>
  
  <p>Setting a transparent border as suggested in the comments does not solve my problem (tested in FF40). I am trying to create a transparent gap around my middle div element (the magenta one). Setting a transparent border on this element does not work. </p>
  
  <p>I am looking for a way to clip the sibling divs that fall behind the middle div so a small piece of the background is visible on either side of the middle element that follows the edge/shape of the centre element. </p>