Runde fünf von CSS3 im Detail – Border-Radius.
Entschuldigt die enorme Verzögerung aber ich hatte bisschen Prüfungsstress und viel Arbeit, sodass mir dann die Motivation gefehlt hat noch diese Artikel zu schreiben. Sei’s drum, heute gehts um eine nützliche Technik, mit der man runde Ecken erstellen kann. Früher musste man immer mindestens zwei Grafiken erstellen, um einer Box runde Ecken zu verpassen – das wird sich jetzt ändern. Border-Radius wird euch gefallen, es erspart einem sehr viel Arbeit und wird von den meisten Browsern schon ganz gut unterstützt.
Browserunterstützung
Folgende Browser unterstützen diese Technik bereits:
Einsatzgebiete
Sogenannte “runde Ecken” spielen in heutiger Zeit eine immer größere Rolle, alle modernen UIs benutzen sie an nahezu allen Elementen. Manchmal recht großzügig, dann wieder nur mit der Lupe zu erkennen, ein gutes Beispiel sind aktuelle Windows Versionen (Vista oder 7), die extrem viel Aufwand in diese Richtung betreiben. Folgender Screen soll das einmal illustrieren..

Ein Fenster in Windows 7 hat viele runde Ecken: der Fensterrahmen, die Buttons oben rechts, der Rahmen um die markierte Festplatte, etc.
Warum? Weil runde Ecken angenehmer anzusehen sind und das ganze Design etwas auflockern. Fenster mit richtigen Ecken, wie bei Windows 2000 und davor, wirken heutzutage altbacken und hässlich.
Syntax
Border-Radius wird von den Browsern durch unterschiedliche Präfixe unterstützt.
1 2 3 4 5 | div.rounded { -moz-border-radius:10px; /* Firefox - alte Syntax */ -webkit-border-radius:10px; /* Safari, Chrome - alte Syntax */ border-radius:10px; /* alle neuen Browser, W3C Standard */ } |
Diese Anweisungen bewirken, dass die Ecken eines divs
mit der Klasse rounded abgerundet werden. Folgendes Beispiel, hat zur Verdeutlichung der Rundungen zusätzlich eine Schwarze Border bekommen.
border-radius
kann aber nicht nur mit einem Wert gesteuert werden. Maximal sind 4 Werte möglich, wobei jeder davon ein Ecke kontrolliert, im Uhrzeigersinn beginnend mit der links oben. Folgender Code bewirkt z.B., dass nur die beiden Ecken oben abgerundet werden, die unten bleiben eckig.
1 2 3 4 5 | div.rounded_up { -moz-border-radius:10px 10px 0 0; /* Firefox - alte Syntax */ -webkit-border-radius:10px 10px 0 0; /* Safari, Chrome - alte Syntax */ border-radius:10px 10px 0 0; /* alle neuen Browser, W3C Standard */ } |
Natürlich kann man auch “unterschiedlich runde Ecken” machen, indem man einfach verschiedene Werte benutzt, hier gilt: Probieren geht über Studieren.
Safari spackt hier noch etwas rum. Es kommt mit 4 Werten nicht klar und ignoriert deswegen den Befehl. Da es aber die selbe Engine wie Chrome nutzt, wird sich hier demnächst bestimmt eine Besserung einstellen. Bis es soweit ist, kann man sich diesen Artikel auf CSS3.info mal durchlesen.
Update: Mit Safari 5 sollte alles funktionieren.
Fazit
Ein wahnsinnig mächtiger Befehl, Border-Radius lässt uns schnell und komfortabel Rundungen an allen Elementen erstellen. Das lästige Zuschneiden von Grafiken und der damit verbundene Aufwand über CSS-Formatierungen (Stichwort: Sliding Doors) entfällt vollständig. Das spart mal wieder jede Menge Traffic und Zeit beim Aufbau einer Seite. Viel Spaß damit!
7 Kommentare RSS
Zu dieser CSS3-Eigenschaft hatte ich kürzlich ein kleines Tutorial mit dem Title “CSS3 Tutorial – Website-Navigation – Border-Radius” zum besseren Verständnis vorgestellt. Wird wirklich langsam Zeit, dass auch der IE es endlich unterstützt, nun wo auch Opera 10.50 dazu in der Lage ist.
Microsoft hat zumindest bei der Vorstellung des IE9 viele Versprechen in dieser Hinsicht gemacht. Ich geh ziemlich fest davon aus, dass sie Border-Radius und sicherlich auch Box- sowie Text-Shadow implementieren werden. Und ja, darauf freu ich mich schon.
“Folgendes Beispiel, hat zur Verdeutlichung der Rundungen zusätzlich eine Schwarze Border bekommen. border-radius kann aber nicht nur mit einem Wert gesteuert” – was meinst du damit?
Was genau meinst du mit der Frage? Meine Aussage bezieht sich auf die Syntax, man kann Border-Radius mit einer oder mehreren Werten “füttern”, jeder Wert steht für eine Ecke des Elements..
Bin gerade zufällig auf deinen Blog gestoßen da ich aktuell auch gerade mit dem border-radius Problem unter Safari gekämpft habe.
Zum Thema Bugfix bei Safari – habe gerade im Apple Safari Dev Center nachgelesen wie man den gewünschten Effekt bewirken kann, Safari brauch hierfür nur ne Extrawurst (Werte sind Beispiele):
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
Mit diesen Attributen muss für jede Ecke der Radius einzeln angegeben werden, dann klappt die Sache auch wunderbar – habs gerade getestet. Seltsamer Weise scheint der einfache “-webkit-border-radius:” Befehl manchmal relativ willkürlich auch von Safari aktzeptiert zu werden. Hoffe ich konnte was zum Thema beitragen
Danke für diesen Zusatz!
Danke, deine Artikel sind sehr hilfreich!
gute Arbeit geleistet!