CSS border-radius für vier Ecken generieren

Tragen Sie die vier Eckenwerte in der Reihenfolge oben links, oben rechts, unten rechts und unten links ein, wählen Sie eine Einheit und erzeugen Sie daraus die CSS-border-radius-Deklaration. Fehlen Werte oder die Einheit, werden standardmäßig 10 beziehungsweise px verwendet.

CSS-Rundungen für vier Ecken vorbereiten

Mit dem CSS Border Radius Generator legen Sie die Rundung jeder Ecke eines Elements getrennt fest und erhalten daraus eine border-radius-Deklaration. Das ist hilfreich, wenn nicht alle vier Ecken denselben Wert haben oder Sie eine bestimmte Einheit direkt in der Ausgabe verwenden möchten. Die vier Eingabefelder stehen für oben links, oben rechts, unten rechts und unten links. Dadurch können Sie die gewünschte Reihenfolge beim Übernehmen in Ihre CSS-Regel nachvollziehen.

So erzeugen Sie die Deklaration

1. Öffnen Sie den Generator und suchen Sie die vier Eingabefelder für die Ecken. Tragen Sie den Wert für die obere linke Ecke ein, danach für oben rechts, unten rechts und unten links. Die Reihenfolge ist wichtig, weil sie in derselben Reihenfolge in der erzeugten Deklaration erscheint.

2. Wählen Sie die Einheit beziehungsweise geben Sie den vorgesehenen Einheitstext ein. Wenn Sie einen Wert oder die Einheit nicht selbst festlegen, verwendet das Werkzeug für jeden fehlenden Eckenwert 10 und für die fehlende Einheit px.

3. Prüfen Sie vor dem Erzeugen, ob die Werte zu Ihrer gewünschten Form passen. Für gleichmäßig abgerundete Ecken können Sie denselben Wert viermal verwenden. Für eine asymmetrische Form tragen Sie unterschiedliche Werte ein. Ein Wert von 0 kann für eine einzelne Ecke ebenfalls als Eingabe verwendet werden.

4. Starten Sie die Erzeugung. Übernehmen Sie anschließend die ausgegebene CSS-Deklaration in die passende Regel Ihres Stylesheets. Der Generator erstellt dabei die border-radius-Deklaration; er baut kein vollständiges Stylesheet und keine weitergehende Gestaltung.

Die Ausgabe richtig einordnen

Lesen Sie die Ausgabe als einzelne CSS-Deklaration für die Rundung der vier Ecken. Der erste Wert gehört oben links, der zweite oben rechts, der dritte unten rechts und der vierte unten links. Ein einheitlicher Satz von vier Werten beschreibt deshalb eine gleichmäßige Rundung, während unterschiedliche Werte eine asymmetrische Form ergeben.

Die gewählte Einheit wird an jeden Eckenwert angehängt. Prüfen Sie daher die Ausgabe, wenn Sie einen eigenen Einheitstext verwenden: Sie zeigt unmittelbar, welche Zeichen zusammen mit den Zahlen in die Deklaration eingesetzt wurden. Die Ausgabe ist auf border-radius für abgerundete Ecken begrenzt. Ob die Deklaration in Ihrem konkreten Layout die gewünschte sichtbare Form erzeugt, hängt von der CSS-Regel und dem Element ab, in das Sie sie einsetzen.

Praktisches Beispiel

Sie möchten für ein Kartenlayout vier unterschiedlich stark gerundete Ecken mit Pixelwerten festlegen.

Tragen Sie für ein Element vier unterschiedliche Eckenwerte ein, wählen Sie px und starten Sie die Erzeugung. Lesen Sie anschließend die Reihenfolge der vier Werte in der Deklaration ab.

Die Ausgabe ist eine erfolgreiche CSS-border-radius-Deklaration, in der vier Werte in der Reihenfolge oben links, oben rechts, unten rechts und unten links mit der gewählten Einheit stehen.

Einschränkungen

• Das Werkzeug erzeugt eine CSS-border-radius-Deklaration für abgerundete Ecken, aber kein vollständiges Stylesheet und keine weitergehenden CSS-Regeln.

Häufige Fehler

• Eine vertauschte Eingabereihenfolge führt zu einer anderen Zuordnung der Ecken. Ursache ist meist, dass oben links, oben rechts, unten rechts und unten links nicht nacheinander eingetragen wurden. Korrigieren Sie die Reihenfolge und kontrollieren Sie außerdem, ob der gewünschte Einheitstext an jedem Wert erscheint.

Häufige Fragen

Kann ich alle vier Ecken gleich stark abrunden?

Ja, wenn Sie für alle vier Ecken denselben Wert eintragen. Die Deklaration enthält dann denselben Eckenwert in der festgelegten Reihenfolge.

Welche Einheit wird für die Rundung verwendet?

Wenn Sie die Einheit nicht festlegen, wird px verwendet. Eine von Ihnen angegebene Einheit beziehungsweise ein angegebener Einheitstext wird an jeden Eckenwert angehängt.

Was passiert, wenn ich einen Eckenwert leer lasse?

Wenn ein Eckenwert fehlt, setzt das Werkzeug dafür 10 ein. Prüfen Sie danach die erzeugte Deklaration und tragen Sie fehlende Werte ein, falls Sie eine andere Rundung benötigen.