title: Curved border CSS implementation
body: <p>Recently I saw a design concept on Dribbble, and it's really inspiring me. Especially the sidebar with a curved U-shape at the top and bottom gave me great thoughts on making a tabs stack or flow diagram. I can make it with alpha images, but it would be better to use pure CSS and I don't mind CSS3. However I'm not familiar with CSS3, and hope someone could suggest me a way to do it.</p>
  
  <p><img src="https://i.stack.imgur.com/mcbIB.png" alt="you can see a U-shape concavity at the top and a same shape convexity at the buttom"></p>
  
  <p><em>Cropped from <a href="http://dribbble.com/shots/1213195-CMS-Concept/attachments/162177" rel="nofollow noreferrer">http://dribbble.com/shots/1213195-CMS-Concept/attachments/162177</a></em></p>
  
  <p><em>Original design at <a href="http://dribbble.com/shots/1213195-CMS-Concept" rel="nofollow noreferrer">http://dribbble.com/shots/1213195-CMS-Concept</a></em></p>