CSS3 - border radius

CSS3 bietet die Möglichkeit, Elemente mit abgerundeten Ecken darzustellen. Überall dort, wo eine 'Border' definiert werden kann, können auch die Ecken abgerundet werden.

So führt z.B. folgende CSS Deklaration zu einem einfachen DIV mit abgerundeten Ecken und 5px Radius:

-moz-border-radius: 5px;
border-radius: 5px;

Wie man am Beispiel sieht, implementieren Mozilla-basierte Browser ihr eigenes Süppchen und es wird das Prefix: -moz zusätzlich benötigt...

Um jede Ecke einer Border direkt anzusprechen gibt es jeweils eigene Properties:

border-bottom-left-radius:
border-bottom-right-radius:
border-top-left-radius:
border-top-right-radius:
 
-moz-border-radius-bottomleft:
-moz-border-radius-bottomright:
-moz-border-radius-topleft:
-moz-border-radius-topright:

Natürlich können diese Werte auch kombiniert in einer Deklaration angegeben werden - hier ist die Reihenfolge:
1 Wert: gilt für alle Ecken
2 Werte: (top-left & bottom-right) (top-right & bottom-left)
3 Werte: top-left (top-right & bottom-left) bottom-right
4 Werte: top-left top-right bottom-right bottom-left

So führt folgende CSS-Deklaration:

-moz-border-radius: 5px 15px 40px 60px;
border-radius: 5px 15px 40px 60px;

Zu diesem Bsp:

Ein weiteres, eher unbekanntes Feature des Border-Radius ist die Möglichkeit, 2 Werte für eine Ecke anzugeben - den horizontalen Radius und den vertikalen Radius.
Achtung - Firefox unterstützt dies leider erst ab Version 3.5.

So führt ein

border-top-left-radius: 10px; 30px 
-moz-border-radius-topleft: 10px 30px;

Zu folgendem Ergebnis:

Um die Kurzschreibweise in einer Deklaration zu verwenden, so wie dies oben ja schon beschrieben wurde, werden die Werte für horizontal und vertikal über ein / getrennt:

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

--- Links: ---
Weitere Infos auch beim W3C selbst: http://www.w3.org/TR/css3-background/