Abgerundete Ecken für Boxen - Border Radius

Die Zeit der umständlich, undynamischen Grafiken und verschachtelten DIV's für "runde Ecken" hat mit CSS3 ein Ende.
Border-radius wird nicht vererbt.

Syntax für border-radius

Diese Eigenschaft ist in Entwicklung, deshalb verwenden Webkit- und Mozilla-Browser ein Präfix. Jeder Ecke kann ein eigener Werte zu geweisen werden.

Links oben / Rechts oben
border-top-left-radius / border-top-right-radius
-moz-border-radius-topleft / -moz-border-radius-toprigh
-webkit-border-top-left-radius / -webkit-border-top-right-radius
Rechts unten / Links unten
border-bottom-right-radius / border-bottom-left-radius
-moz-border-radius-bottomright / -moz-border-radius-bottomleft
-webkit-border-bottom-right-radius / -webkit-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; /* W3C Standard, Opera */
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari, Chrome */

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; /* W3C Standard, Opera */
-moz-border-radius: 15px 15px 0px 0px; /* Firefox */
-webkit-border-radius: 15px 15px 0px 0px; /* Safari, Chrome */

border-radius: 0px 25px 0px 25px;  /* W3C Standard, Opera */
-moz-border-radius:    0px 25px 0px 25px; /* Firefox */
-webkit-border-radius:  0px 25px 0px 25px;  /* Safari, Chrome */

border-radius: 0px 25px 15px 50px;  /* W3C Standard, Opera */
-moz-border-radius:    0px 25px 15px 50px;  /* Firefox */
-webkit-border-radius: 0px 25px 15px 50px;  /* Safari, Chrome */

Browser, die das -moz- oder webkit-prefix nicht unterstützen, zeigen normale eckige Rahmen an.

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; 
-moz-border-radius: 5px 20px 5px 20px / 10px 5px 10px 5px;  
-webkit-border-radius: 20px 20px 5px 20px / 10px 5px 10px 5px;  

border-bottom-right-radius: 25px 50px; /* W3C Standard, Opera */
-moz-border-radius-bottomright :  25px 50px; /* Firefox */
-webkit-border-bottom-right-radius: 25px 50px; /* Safari, Chrome */

Bunte CSS3 Welt