"Runde Ecken"

[Marc]

Hallo zusammen,

ein Problem, an dem ich derzeit nicht weiterkomme, sind Überschriften in Rahmen mit runden Ecken...

So etwas:

Eigentlich sollte das nicht so schwer sein...?

Irgendwie habe ich aber ne Denksperre...

Danke für Eure Hilfe!

Folgendes habe ich (unter anderem) probiert:

-------------------------------------------
HTML:

<div id="marginal">
 <div class="part">
  <img src="images/margH1Oben.gif" alt="" />
  <h1>Test Test Test Test Test Test Test</h1>
  <img src="images/margH1Unten.gif" alt="" />
 </div>
</div>
-------------------------------------------

-------------------------------------------
CSS:

div#marginal {
 float:right;
 width:208px;
 margin:0 12px 0 4px;
 padding:0;
 background-color:#eee; /* nur zu Testzwecken */
/* border:1px solid #0f0; */
}

div#marginal img.borderH1 {
 display:block;
 width:208px;
 margin:0;
 border:0;
 padding:0;
}

div#marginal h1 {
 border-left:1px solid #377692;
 border-right:1px solid #377692;
 color:#377692;
 background-color:#fff;
}
-------------------------------------------

CSS und HTML sind selbstverständlich valid, DOCTYPE ist XHTML1.0 strict...

Das vorläufige Ergebnis sieht wie folgt aus:

-------------------------------------------
FF:

-------------------------------------------

Herzlichen Dank für Eure Hilfe!!!

Viele Grüße,
Marc.