CSS - border-radius
Die border-radius Eigenschaft wird verwendet um abgerundete Ecken zu einem Element hinzuzufügen.
Beispiel
div {
border-radius: 10px;
}
Definition und Verwendung
Die border-radius-Eigenschaft ist eine zusammenfassende Eigenschaft für die vier border-*-radius Eigenschaften.
Wenn nur einen Wert für die border-radius Eigenschaft angeben ist, wird dieser Radius auf alle 4 Ecken angewendet werden.
Man kann auch jede Ecke separat angeben:
- Vier Werte: Der erste Wert gilt für oben links, der zweite Wert gilt für oben rechts, der dritte Wert gilt für unten rechts, der vierte Wert gilt für die untere links.
- Drei Werte: Der erste Wert gilt für oben links , der zweite Wert gilt für oben rechts und unten links, der dritte Wert gilt für unten rechts.
- Zwei Werte: Der erste Wert gilt für oben links und unten rechts, der zweite Wert gilt für oben rechts und unten links.
- Ein Wert: Gilt für alle Ecken
- Standard Wert:
- 0
- CSS Version:
- CSS3
- Vererbt sich:
- Nein
- Animierbar:
- Ja
- -webkit-:
- -webkit-border-radius
- -moz-:
- -moz-border-radius
Browser Unterstützung
Chrome Nein
Firefox Nein
Safari Nein
Opera Nein
Edge Nein
IE Nein
Mögliche Werte
Der Eigenschaft können die hier aufgelisteten Werte zugewiesen werden.
| Wert | Beschreibung |
|---|---|
| Länge | Definiert die Form der Ecken. Der Standardwert ist 0. |
| initial | Setzt diese Eigenschaft auf den Standardwert. |
| inherit | Erbt diese Eigenschaft von seinem übergeordneten Element. |