title: CSS - Implementing a border image with tab
body: <p>More a back end programmer, but I'm implementing a design, and I just wanted to see what the most efficient way of implementing a border box would be. </p>
  
  <p>Here is an example of the box - </p>
  
  <p><img src="https://i.stack.imgur.com/rfo8w.png" alt="border box"></p>
  
  <p>The idea is that the blue tab will contain the header text for the section.</p>
  
  <p>Ideally I'd like to use just HTML and CSS, but I realise I may need to use the tab as an image because of it's shape. These boxes can be numerous sizes depending on the content. </p>
  
  <p>I could do the blue border no problem using</p>
  
  <pre><code> -webkit-border-radius: 10px; -moz-border-radius: 10px;
  </code></pre>
  
  <p>or similar, it's mainly the tab that poses the issue for me. Has anyone done anything similar that can offer advice?</p>