CSS border-radius für abgerundete Ecken der Elemente
In CSS kann man Boxen, die um die Elemente gebildet werden, mit abgerundeten Ecken versehen. Im Grunde kann man das bei allen Elementen anwenden. Bei Tabellen kann es jedoch passieren, dass es nicht funktioniert, insbesondere bei zusammenfallenden Rahmenlinien (border-collapse). Bei den übrigen Elementen ist es wichtig, dass es ein Unterscheidungsmerkmal gibt, sodass man die abgerundeten Ecken erkennen kann, z.B. eine Hintergrundfarbe, Rahmen, Schatten, Bild etc. Nachfolgend sind drei Beispiel-Elemente abgebildet, die mit abgerundeten Ecken versehen wurden.
Radien einzeln angeben
Die Radien für die vier Ecken können einzeln angegeben werden. Hierfür verwendet man folgende Schlüsselwörter für die Eigenschaften.
- border-top-left-radius (oben links)
- border-top-right-radius (oben rechts)
- border-bottom-right-radius (unten rechts)
- border-bottom-left-radius (unten links)
Nachfolgend ist die Abbildung mit einem Beispiel.
Angabe der Werte für die Radien
Die Radien können nicht nur in Pixel angegeben werden. Die folgenden Einheiten sind ebenfalls möglich. Der Platzhalter <Zahl> ist durch eine Zahl zu ersetzen. Die Erläuterung erfolgt innerhalb der runden Klammern am Ende jeder Zeile.
- <Zahl>px (Pixel)
- <Zahl>% (Prozent, bezieht sich auf die Größe des Elements)
- <Zahl>em (relative Schriftgröße des Elternelements, beginnend vom Standard des Geräts)
- <Zahl>rem (1rem entspricht der Größe, die für das Wurzelelement html gilt)
- <Zahl>ex (1ex entspricht der Größe des Kleinbuchstabens x, falls es definiert wurde, ansonsten 0.5em)
- <Zahl>ch (1ch entspricht der Breite der Ziffer 0, falls es definiert wurde, ansonsten Durchschnittsbreite aller Zeichen)
- <Zahl>vw (1vw entspricht 1% der Anzeigebreite)
- <Zahl>vh (1vh entspricht 1% der Anzeigehöhe)
- <Zahl>vmin (der kleinere Wert von vw oder vh)
- <Zahl>vmax (der größere Wert von vw oder vh)
- <Zahl>pt (Punkt)
- <Zahl>pc (Pica)
- <Zahl>in (Inch)
- <Zahl>mm (Millimeter)
- <Zahl>cm (Zentimeter)
In der Regel verwendet man die Einheit px (Pixel) oder % (Prozent) und diese sind meistens ausreichend.
Angabe der horizontalen und vertikalen Radien
Die Werte, die angegeben werden, gelten für die horizontalen und vertikalen Radien. Möchte man diese unterschiedlich gestalten, kann man statt einem Wert für eine Ecke zwei Werte angeben, die mit einem Leerzeichen getrennt werden. Ein Beispielcode.
.selektor {
border-top-left-radius: 115px 35px;
border-top-right-radius: 120px 40px;
border-bottom-right-radius: 125px 45px;
border-bottom-left-radius: 130px 50px;
}Der CSS-Code würde sich bei den Elementen wie folgt auswirken.
Kurzschreibweise mit border-radius
Die Radien für die Ecken können auch in Kurzschreibweise angegeben werden. Hierfür verwendet man die Eigenschaft border-radius, die zu den sogenannten Shorthand-Eigenschaften zählt. Dabei werden die Radien von oben links beginnend, im Uhrzeigersinn mit einem Leerzeichen getrennt eingetragen.
Kurzschreibweise mit drei Werten
Die Kurzschreibweise kann auch mit drei Werten erfolgen. In dem Fall gilt der 1. Wert für die Ecke oben links, der 2. Wert für oben rechts und unten links, der 3. Wert für unten rechts. Ein Beispiel.
.selektor {
border-radius: 5px 15px 25px;
}Kurzschreibweise mit zwei Werten
Wenn nur zwei Werte angegeben werden, dann gilt der 1. Wert für oben links und unten rechts, der 2. Wert für oben rechts und unten links. Ein Beispiel.
.selektor {
border-radius: 10px 20px;
}Angabe der horizontalen und vertikalen Radien in Kurzschreibweise
In der Kurzschreibweise ist die Angabe der horizontalen und vertikalen Radien ebenfalls möglich. Allerdings werden sie nicht mit einem Leerzeichen getrennt, sondern mit einem / (Slash, Schrägstrich). Ein Beispielcode.
.selektor {
border-radius: 115px/35px 120px/40px 125px/45px 130px/50px;
}Auch hierbei gilt, dass man nicht die Werte für alle vier Ecken angeben muss und bei drei Wertepaaren das 1. Wertepaar für oben links, das 2. für oben rechts und unten links, das 3. für unten rechts gilt. Ein Beispielcode.
/* Mit 3 Wertepaaren */
.selektor {
border-radius: 115px/35px 120px/40px 125px/45px;
}
/* Mit 2 Wertepaaren */
.selektor {
border-radius: 115px/35px 120px/40px;
}Bei zwei Wertepaaren gilt das 1. Wertepaar für oben links und unten rechts, das 2. für oben rechts und unten links.
Kreis oder Ellipse mit border-radius
Ein Kreis oder eine Ellipse ist mit border-radius sehr einfach zu erstellen. Die einzige Voraussetzung ist, dass die Box quadratisch (für einen Kreis) oder rechteckig (für eine Ellipse) ist. In den CSS-Einstellungen braucht man für die Box nur border-radius: 50%; anzugeben. Ein höherer Prozentwert hat denselben Effekt.
Ein Beispielcode für einen Kreis und eine Ellipse.
.kreis-selektor {
width: 290px;
height: 290px;
border: 5px solid #001055;
border-radius: 50%;
}
.ellipse-selektor {
width: 600px;
height: 300px;
background: #666699;
border-radius: 50%;
}Weist man diese Klassen DIV-Containern zu, hätte man einmal einem Kreis mit einem Rahmen und eine Ellipse mit einer Hintergrundfarbe. Bei der Angabe fester Größen muss man jedoch bedenken, dass wenn die Box größer wird als angegeben, z.B. durch einen zu großen Inhalt, dann verschieben sich die Radien nicht und können dadurch den Inhalt überlagern.
Browser-Präfixe für ältere Browser-Versionen
In einigen älteren Browser-Versionen ist die Eigenschaft border-radius nicht implementiert. Bei manchen Versionen wird ein Browser-Präfix benötigt. Wenn man sie berücksichtigen möchte, kann man sie vor dem Eintrag border-radius angeben.
.selektor {
-webkit-border-radius: 10px; /* Für Safari, Chrome */
-moz-border-radius: 10px; /* Für Firefox */
-o-border-radius: 10px; /* Für Opera */
-khtml-border-radius: 10px; /* Für Konqueror */
border-radius: 10px;
}Überlagerung der Radien
Wenn man Werte angibt, die mehr als 50% einer Seite ausmachen, dann können sich die Radien überlagern. In dem Fall werden die Werte automatisch proportional heruntergerechnet. Die beiden Codes im folgenden Beispiel hätten denselben Effekt.
.selektor {
border-top-left-radius: 300%;
border-top-right-radius: 150%;
border-bottom-right-radius: 300%;
border-bottom-left-radius: 150%;
}
/* Hat denselben Effekt */
.selektor {
border-top-left-radius: 200%;
border-top-right-radius: 100%;
border-bottom-right-radius: 200%;
border-bottom-left-radius: 100%;
}Das ist auch der Grund, weshalb man bei einem quadratischen Element lediglich 50% oder höher angeben muss, um einen Kreis zu erhalten. Die überschüssigen Prozente werden automatisch heruntergerechnet.