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.
Here is an example of the box –

The idea is that the blue tab will contain the header text for the section.
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.
I could do the blue border no problem using
-webkit-border-radius: 10px; -moz-border-radius: 10px;
or similar, it’s mainly the tab that poses the issue for me. Has anyone done anything similar that can offer advice?
Start here and modify as you need, should work for what you’re after.