# obere ecken abrunden funktioniert nicht - css3



## H4ckHunt3r (3. März 2012)

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 (3. März 2012)

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


----------



## H4ckHunt3r (3. März 2012)

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 (6. März 2012)

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.


----------

