Border Radius – Großes Glück!

Der border-radius ermöglicht es dem Gestalter die Ecken der Box-Elementen abzurunden, ohne Grafiken dafür zu verwenden.

Die Werte für die Radien können unabhänging definiert werden.

Hier ein Beispiel:

Eigentlich sollten alle Benutzer moderner Browser diese Box mit abgerundeten Ecken sehen.

Der Code sieht dann so aus:

#beispiel__radius_1 {
border-radius: 15px;
}

Definition

Die Eigenschaft wird wie folgt definiert:

<border-radius> = 
[<length>|<percentage>]{1,4} [/[<length>|<percentage>]{1,4}]?

Die Eigenschaft kann also 1-4 Parameter enthalten, sowie optional noch weitere 1-4 Parameter, die mit einem Schrägstrich (/) von den vorangegeangenen Werten getrennt werden.

Es handelt sich entweder um Längenangaben oder Prozentwerte, die im Verhältnis zu gesamten Box stehen.

Es können auch einzelne Ecken gezielt angesteuert werden:

<border-[top-right|bottom-right|bottom-left|top-left]-radius> =
 [<length>|<percentage>] [<length>|<percentage>]?

Die Eigenschaften border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius bekommen einen Parameter (Länge oder Prozent) und optional einen weiteren Wert, der durch ein Leerzeichen abgetrennt wird.

Der Eckenradius ist natürlich immer vom Rahmen der Box abhängig. Ohne Rahmen gibt es auch keine abgerundeten Ecken.

Wie setzten sich die Parameter nun zusammen?

Der erste Wert steht für den horizontalen (h) und der optionale Wert für den vertikalen (v) Radius einer Elipse, welche die Form der abgerundeten Ecke beschreibt. Wird nur ein Wert angegeben, dann entspricht h=v.

Bei der Verwendung von border-radius stehen vor dem Schrägstrich (/) die horizontalen Werte, dahinter die vertikalen Werte, dementsprechend reden wir wieder von einem Kreis (h=v), wenn der optionale Wert (/ + Werte) weggelassen wird.

Parameter

Auf welche Ecken sich die Werte beziehen, hängt nun von deren Anzahl ab. Hier die Übersicht:

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

Es ist durchaus möglich, für den horizontalen und den vertikalen Radius jeweils eine andere Anzahl Werte zu setzen, also z.B. ein Einheitswert horizontal und vier Einzelwerte vertikal. 0 steht immer für keine Rundung.


Beispiele

border-radius: 15px;
border-radius: 50px / 25px;
border-radius: 5px 10px 20px 30px / 10px 20px 30px 40px;
border-radius: 50%;
border-bottom-right-radius30px;
border-top-left-radius30px;
border-radius: 25px 10px 25px 10px / 10px 25px 10px 25px;
height:150px;
width:150px;
border-radius: 75px;