So verwenden Sie es
- Wählen Sie die Einheit: px für einen festen Radius oder % für einen Radius, der der Größe des Kastens folgt.
- Tragen Sie unter Oben links, Oben rechts, Unten rechts und Unten links je einen Radius ein. Eine Ecke mit 0 ist eckig.
- Setzen Sie den Haken bei Elliptische Ecken (eigener senkrechter Radius), wenn eine Ecke breiter als hoch sein soll, und tragen Sie deren senkrechten Radius ein.
- Kopieren Sie die Deklaration unter CSS und fügen Sie sie in die Regel Ihres Elements ein.
So werden die vier Ecken geschrieben
Die Eigenschaft border-radius nimmt ein bis vier waagerechte Radien, in der Reihenfolge oben links, oben rechts, unten rechts und unten links. Eine Liste mit weniger Werten wiederholt die vorhandenen: Bei zwei Werten gelten der erste für oben links und unten rechts, der zweite für oben rechts und unten links. Ein senkrechter Radius steht nach einem Schrägstrich, in derselben Reihenfolge.
Die Grammatik steht in der CSS-Spezifikation „Backgrounds and Borders“ (englisch). Jeder Radius ist eine Länge oder ein Prozentwert des Kastens, und ein Radius von null braucht keine Einheit.
border-radius: oben links oben rechts unten rechts unten links / senkrecht oben links senkrecht oben rechts senkrecht unten rechts senkrecht unten linksDie kürzeste Form
Der Rechner lässt jeden Wert weg, den die Kurzschreibweise ohnehin wiederholen würde. Ist die Ecke unten links gleich oben rechts, wird sie nicht geschrieben. Ist unten rechts gleich oben links, entfällt der dritte Wert. Vier gleiche Ecken werden zu einem Wert, daher wird 12px 12px 12px 12px als 12px geschrieben.
Der Schrägstrich steht nur, wenn ein senkrechter Radius vom waagerechten abweicht. Ohne elliptische Ecken ist jeder senkrechte Radius gleich dem waagerechten, daher erscheint kein Schrägstrich.
Rechenbeispiel: eine Karte mit elliptischen Ecken
Stellen Sie die Ecke oben links auf 40 px mal 20 px, oben rechts auf 20 px mal 10 px, unten rechts auf 40 px mal 20 px und unten links auf 20 px mal 10 px. Die waagerechten Radien sind 40, 20, 40, 20, die die Kurzschreibweise als 40px 20px schreibt. Die senkrechten Radien sind 20, 10, 20, 10, die sie als 20px 10px schreibt.
Die Deklaration lautet border-radius: 40px 20px / 20px 10px;, und die Vorschau zeigt Ecken, die breiter als hoch sind.
Häufig gestellte Fragen
Warum stehen zwei Zahlenreihen durch einen Schrägstrich getrennt?
Die erste Reihe gibt den waagerechten Radius jeder Ecke an, die Reihe nach dem Schrägstrich den senkrechten. Ohne Schrägstrich ist eine Ecke ein Kreisbogen mit demselben Radius in beide Richtungen.
Was bewirkt ein Radius in Prozent?
Ein Prozentwert bezieht sich beim waagerechten Radius auf die Breite des Kastens und beim senkrechten auf seine Höhe. 50 % an jeder Ecke ergeben einen Kreis, wenn der Kasten quadratisch ist, und sonst eine Ellipse.
Warum ist die Reihenfolge oben links, oben rechts, unten rechts, unten links?
Die Kurzschreibweise folgt dem Uhrzeigersinn, den auch die anderen Eigenschaften des Kastens verwenden, und beginnt oben links. Wenn Sie diese Reihenfolge kennen, sind die kürzeren Formen mit zwei oder drei Werten leicht zu lesen.
Prüft der Rechner den Radius gegen die Größe des Kastens?
Nein. Der Rechner prüft nur, ob jeder Radius eine Zahl von null oder mehr ist und innerhalb der Grenze von 1000 px oder 100 % liegt. Ergeben zwei benachbarte Radien zusammen mehr als die Seite des Kastens, verkleinert der Browser sie.
Wird das, was ich eingebe, gespeichert oder an einen Server gesendet?
Nein. Die Vorschau und das CSS entstehen in Ihrem Browser. Nichts wird gespeichert oder an unseren Server gesendet; kopieren Sie die Deklaration daher, bevor Sie die Seite verlassen.
Quellen
Zahlen und Text zuletzt geprüft: Dienstag, 10. November 2026.