Runde Ecken mit CSS (Cross-Browser)

Runde Ecken… sie sind hübsch, machen eine Website harmonischer und dynamischer. CSS3 sei Dank, ist das, was man früher nur mit Bildern, teilweise mit verschachtelten Div-Monstern erreichen konnte, keine Frickelarbeit mehr.

Bis CSS3 von allen Browsern flächendeckend unterstützt werden, ist leider doch noch ein bisschen Voodo notwendig. Allerdings müssen wir nicht mehr mit obskuren DIV-Konstrukten und Bildern arbeiten, sondern erreichen in den meisten modernen Browsern mit reinem CSS ziemlich gute Ergebnisse. Chrome, Safari und Firefox machen überhaupt keine Probleme und zeigen uns runde Ecken an, wenn wir das möchten.

Der CSS-Befehl in CSS3 lautet schlichtweg

border-radius: 10px;

. Oben genannte Browser setzen diesen Befehl aktuell jedoch noch nicht so um, sie haben alle eigene Befehle, die allerdings das gleiche Ergebnis produzieren.

Folgender Codeblock produziert das gewünschte Ergebnis:

.runde_ecken {
-moz-border-radius: 10px; /* Mozilla */
-webkit-border-radius: 10px; /* Webkit-Browser */
-khtml-border-radius: 10px; /* KHTML-Browser */
border-radius: 10px; /* CSS3 */
}
Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext.

Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi – Sein ist wahrgenommen werden.

border-radius: 10px; schreiben wir ganz zum Schluss um ggf. vorherige Deklarationen damit zu überschreiben, sollte ein Browser den W3C CSS Standard dann doch unterstützen.

Im Internet Explorer und auch im Opera funktioniert das Ganze leider nicht (Opera 10.50beta interpretiert scheinbar das CSS3 border-radius). Das wäre ja auch zu einfach gewesen. :)

Internet Explorer

Im Internet-Explorer müssen wir uns ein wenig Java-Script bedienen und dreckiges CSS produzieren. Doch was will man machen, wenn der Kunde auf gerundeten Ecken besteht? Und das auch noch in allen möglichen Browsern?
Ich persönlich bin Fan davon, dort die abgerundeten Ecken einfach sein zu lassen, und stattdessen einigermaßen validen Code zu schreiben, aber manchmal hat man das einfach nicht zu entscheiden. :(

http://code.google.com/p/curved-corner/ bietet uns ein bisschen JavaScript, dass runde Ecken im Internet-Explorer zeichnet. Die Lösung ist relativ dreckig und spielt nicht gut mit dem dynamischen Nachladen von Elementen zusammen.

Alle Elemente die Runde Ecken bekommen sollen, müssen folgenden Code im CSS haben:

.runde_ecken {
behaviour: url(/js/border-radius.htc);
border-radius:10px;
}

Hierbei ist zu beachten, dass die runden Ecken nur dann gezeichnet werden, wenn die Elemente zusätzlich ein die “position”-Eigenschaft im CSS gesetzt bekommen, auch wenn das eigentlich gar nicht nötig wäre.

Auch können nicht unterschiedliche Werte für die einzelnen Ecken angewendet werden. Möchtet ihr also nur unten runde Ecken, ist das im IE nicht möglich. Auch die Verwendung mit RGBA-Elementen, also Transparenzen ist nicht möglich.

.runde_ecken {
behaviour: url(/js/border-radius.htc);
border-radius:10px;
position:relative;
}

Opera 10.10 braucht wieder einen anderen Hack, und der oben genannte IE-Hack ist auch eher dreckig und mies, statt vernünftig und valide.

Ich empfehle daher, auf reines CSS ohne JavaScript zu setzen und denjenigen, deren Browser keine abgerundeten Ecken per CSS3 rendern kann, einfach die normalen Ecken anzeigen zu lassen.