title: Div with transparent gap inside border
body: <p>I've got a div of varying size that needs to have a transparent area followed by a white border as seen in this screenshot:</p>
  
  <p><img src="https://i.stack.imgur.com/97n6u.png" alt="gap between border and background"></p>
  
  <p>I have no problem getting the red transparency and shape correct, but am at a loss on how to get the transparent area followed by the white border. How can I do this?</p>