Thema: CSS - div mit versetzter border/outline

example.jpg

hi. ich würde gerne diesen Effekt hinbekommen, ohne eine Grafik einzubinden.
Das blaue div ist kein Problem, aber wie mache ich diese weisse versetzte Linie?
Ich habe das ganze als eine h1 angelegt (also nur den blauen Teil mit Schrift), d.h die Headline kommt direkt aus einem Beitrag.
Ich hab keine Ahnung wie ich jetzt weiter vorgehe. Jemand nen Tip was ich mir anschauen könnte oder ggf ein kleines Codesnippet?

Dank euch im Voraus

Hi,

ja firebug is ne dolle Sache - beantwortet leider keine Fragen sondern analysiert nur den "ist" Zustand.

h1
{
font-size:21px;
color:#ffffff;
font-weight:bold;
text-align:left;
background-color:#547483;
margin-top:20px;
width:50%;
padding-top:10px;
padding-bottom:10px;
padding-left: 20px;
margin-bottom:20px;
margin-left: 20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

also bisher habe ich die h1 so aufgebaut. demnach habe ich text, rounded corners und position gestylt. es geht mir nur um den kleinen weissen rahmen wie im bild. wie bekomm ich den so asymetrisch hin?