CSS3: Runde Ecken mit CSS

Mit CSS3 kommen viele neue und standardisierte Features für die Erstellung von Webseiten ins Spiel, die dem Webdesigner und Programmierer neue und einfache Möglichkeiten bieten.

Bisher gab es nur zwei Methoden zur Einbindung von runden Ecken.

Einmal über eine Grafikdatei, die als Hintergrund mittels CSS geladen wurde oder aber mit Hilfe von internen CSS Regeln der Browser-Hersteller, wie z.B. -moz-border-radius.

Letztere Variante möchte ich hier kurz näher erläutern.

Über die browserspezifischen CSS Regeln kann man innerhalb der CSS Eigenschaften definieren, die nur der angesprochene Browser interpretieren kann und entsprechend ausgibt. Dies hat natürlich zur Folge, dass andere Browser die entsprechenden Befehle nicht richtig auslesen, weshalb man für diese wiederum andere eigene Regeln nutzen muss. Hier ein kleines Beispiel:

.abgerundet {
   -moz-border-radius:10px; /* Firefox */ 
   -webkit-border-radius:10px; /* Safari, Chrome */ 
   -khtml-border-radius:10px; /* Konqueror */
}

Wie Sie sehen haben wir drei Eigenschaften für Runde Ecken definiert. Diese drei Eigenschaften sind unter anderem für „Firefox“, „Google Chrome“, „Safari“ etc.. Außen vor bleibt hierbei der „Internet-Explorer“.

Die neusten Versionen der Browser beherrschen jedoch die CSS3 Eigenschaft „border-radius“, sogar der „Internet-Explorer“ ab Version 8. Mit diesem Befehl hat man die Möglichkeit, runde Ecken mit nur einer Regel zu definieren.

   border-radius: WERT1 WERT2 WERT3 WERT4;

Dadurch ist es uns nun möglich, mit nur einer Eigenschaft, runde Ecken für unsere Webseite oder Box zu generieren. border-radius lässt vier Werte zu, mit denen wir dem Browser mitteilen können, welche Ecke des Containers wir abrunden wollen.

Beispiel:
Möchten wir nur die obere linke Ecke mit einer 20px starken Abrundung versehen, so nutzen wir die border-radius Eigenschaft wie folgt:

   border-radius: 20px 0 0  0;

Wir haben So aber auch die Möglichkeit festzulegen, dass nur die beiden oberen Ecken abgerundet werden sollen.

   border-radius: 20px 20px 0 0;

Mit dieser Anweisung in der CSS erreichen wir, dass die beiden oberen Ecken abgerundet werden, die beiden unteren aber ihren Normalzustand beibehalten.

Wenn wir nun alle Ecken mit der gleichen Rundung versehen möchten, so benutzen wir border-radius einfach nur mit einem Wert.

   border-radius: 20px;

Im übrigen lassen sich mit dem Befehl border-radius nicht nur Borders, sondern auch jegliche andere Arten von Containern beeinflussen.