Abgerundete Ecken für Boxen - Border Radius

Die Zeit der umständlich, Grafiken 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,

regelmässig gerundete Ecken.
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.

TAB Style
border-radius: 15px 15px 0px 0px;
Ddiagonal
border-radius: 0px 25px 0px 25px; 
unregelmässig
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.

vier verschieden runde Ecken
border-radius: 5px 20px 5px 20px / 10px 5px 10px 5px;   
unterschiedlicher Radius
border-bottom-right-radius: 25px 50px; 

WICHTIG

Border Radius und Internet Explorer
Browser, die Border Radius nicht unterstützen, zeigen normale eckige Rahmen an.
Weitere Beispiele findest Du unter: border-radius, gradient, box-shadow und text-shadow