obere ecken abrunden funktioniert nicht - css3

[H4ckHunt3r]

Hi,
ich habe gerade irgendwie ein Problem und hoffe das mir jemand helfen kann^^
Ich habe in mehrere div containder ineinander gestapelt.
Möchte nun das die hintergrundgrafik des 1. div containers
mit 5 pixel Radius abgerundet wird.

Da wollte ich nun einfach via CSS border-radius verwenden,
was allerdings nicht zu funktionieren scheint.

Hier mal mein Code:

.content-wrapper {
	width:100%;
	text-align:center;
}

.content-head {
	width:96%;
	height:55px;
	margin:auto;
	text-align:left;
}

.content-head .ch-puff {
	width:100%;
	height:55px;
	background-image:url('images/head_puff.png');
	background-repeat:repeat-x;
	
	-webkit-border-top-right-radius:5px;
	-moz-border-radius-topright:5px;
	-khtml-border-top-right-radius:5px;
	-o-border-top-right-radius:5px;
	-ms-border-top-right-radius:5px;
	border-top-right-radius:5px;
	
	-webkit-border-top-left-radius:5px;
	-moz-border-radius-topleft:5px;
	-khtml-border-top-left-radius:5px;
	-o-border-top-left-radius:5px;
	-ms-border-top-left-radius:5px;
	border-top-left-radius:5px;
}

.content-head .ch-left {
	height:55px;
	width:100%;
	background-image:url('images/head_left.png');
	background-repeat:no-repeat;
	background-position:top left;
}

.content-head .ch-right {
	height:55px;
	width:100%;
	background-image:url('images/head_right.png');
	background-repeat:no-repeat;
	background-position:top right;
}


.content-head-txt {
	position:absolute;
	margin-top:28px;
	margin-left:10px;
	color:#FFF;
	font-weight:bold;
}

 <section class="content-wrapper">
  <section class="content-head">
    <div class="ch-puff">
     <div class="ch-left">
      <div class="ch-right"><span class="content-head-txt">{PLACE}</span></div>
     </div>
    </div>
  </section>
  <section class="content-main"></section>
  <section class="content-foot"></section>
 </section>

Das Ziel ist, das sich 3 Bilder so überlagern,
dass eins daraus wird und dieses sich dynamisch
der Breite des Browserfensters anpasst.

 

[Parantatatam]

Wenn ich mich nicht ganz irre, überdeckt der Hintergrund der Kindelemente die abgerundeten Ecken. Du müsstest also auch diese abrunden.

 

[H4ckHunt3r]

die oben liegenden Hintergrund-Grafiken sind png Grafiken,
bei denen diese ecken bereits ausgespart sind.

Ich habe dennoch mal bei den Kindelementen die ecken abgerundet.
Das Resultat ist das selbe => Keine abgerundeten Ecken :/

Edit:
Vielleicht bringt es euch ja was den Code im gesammten zusammenhang zu sehen,
habe es mal hochgeladen: http://hg.h4ckhunt3r.net/test/

achja und die nach unten abgerundeten Ecken funktionieren auch nicht^^

 

[para_noid]

Mh.
Also damit es (bei mir im FF) mit den darunterliegenden passt, müsstest du statt 5px 25px nehmen. Ich kann diese hohen Angaben aber nicht wirklich nachvollziehen...
Unten genauso.