Abgerundete Ecken für Boxen - Border Radius

Die Zeit der umständlich mit Grafiken realisierten und verschachtelten DIV's für "runde Ecken" hat mit CSS3 ein Ende.
Die Lösung heisst border-radius und wird nicht vererbt.

Syntax für border-radius

Webkit- und Mozilla Präfix sind nicht mehr nötig.
Hier ein Scrip um eine IE Lösung zu erzwingen.

Jeder Ecke kann ein eigener Werte zu geweisen werden.
Links oben / Rechts oben
border-top-left-radius / border-top-right-radius
Rechts unten / Links unten
border-bottom-right-radius / border-bottom-left-radius

Beispiele für border-radius

Wenn alle gerundeten Ecken gleich sind, muss der border-radius nur einmal definiert werden,

border-radius: 15px; 

Ecken einzeln ansprechen (Kurzschreibweise)

CSS bietet die Möglichkeit bestimmte Anweisungen verkürzt zu schreiben.
Die Datei wird um einiges kleiner und übersichtlicher.
Bei ungleich gerundete Ecken, kann der border-radius in einer Zeile definiert werden. Reihenfolge: links-oben, rechts-oben, rechts-unten, links-unten.

border-radius: 15px 15px 0px 0px;

border-radius: 0px 25px 0px 25px; 

border-radius: 0px 25px 15px 50px;

Unterschiedlicher horizontaler und vertikaler Radius

Das erste Set der Anweisungen (Werte 1-4) definert den horizontalen Radius für alle vier Ecken. Das optionale zweite Set der Anweisungen folgt nach einem "/" und definiert den vertikalen Radius von allen vier Ecken. Ist nur das erste Set definiert werden die Angaben für den horizontalen und den vertikale Radius verwendet.

border-radius: 5px 20px 5px 20px / 10px 5px 10px 5px;   

border-bottom-right-radius: 25px 50px; 

WICHTIG