Stellen Sie den Radius für jede der vier Ecken einzeln ein

Mit Eckenradius können Designer und Frontend-Entwickler eine Oberfläche vor der Umsetzung abstimmen. Stellen Sie den Radius für jede der vier Ecken einzeln ein.

Stellen Sie den Radius für jede der vier Ecken einzeln ein. Das Werkzeug ist im Browser kostenlos und zeigt das Ergebnis ohne Anmeldung an.

Bedienung

Geben Sie den Radiuswert für die Ecke oben links ein, dann die anderen drei Ecken in der angegebenen Reihenfolge.
Verwenden Sie eine Einheit wie px, em oder Prozent und behalten Sie dieselbe Einheit für alle vier Ecken bei.
Klicken Sie auf die Schaltfläche zum Generieren, um die passende CSS-Regel border-radius zu erzeugen.
Lesen Sie das Ergebnis, das die vier Werte kombiniert, und kopieren Sie es in Ihr Stylesheet.
Testen Sie die Darstellung an einem Beispielelement, bevor Sie sie zu Ihrer Seite hinzufügen.

Beispiel

Die Beispieleingabe verwendet vier verschiedene Eckwerte. Nach dem Generieren zeigt das Ergebnis die entsprechende Eigenschaft border-radius. Sie können diese Ausgabe mit Ihren eigenen Werten vergleichen, um die Reihenfolge der Ecken zu bestätigen, bevor Sie sie in Ihren Code einfügen.

Grenzen und Formate

Das Tool zeichnet kein Feld auf dem Bildschirm; es erzeugt nur die zu kopierende CSS-Regel.
Werte müssen numerisch und null oder positiv sein; negative Werte werden von der CSS-Eigenschaft nicht akzeptiert.
Das Mischen von Einheiten kann dazu führen, dass der Browser das Ergebnis ignoriert.
Prüfen Sie stets die endgültige Darstellung in Ihrer Seite, da der Kontext des Elements den visuellen Effekt beeinflussen kann.

Wo die Verarbeitung stattfindet

Alles läuft in Ihrem Browser. Die von Ihnen eingegebenen Werte werden niemals hochgeladen oder gespeichert. Die Berechnung und Formatierung der CSS-Regel erfolgen lokal, ohne externe Kommunikation.

Häufige Fragen

In welcher Reihenfolge sollte ich die vier Werte eingeben?

Die erwartete Reihenfolge ist oben links, oben rechts, unten rechts, unten links. Dies ist die Standardreihenfolge für die Eigenschaft border-radius. Wenn Sie zwei Werte vertauschen, unterscheidet sich die Darstellung. Prüfen Sie das angezeigte Ergebnis zur Bestätigung.

Kann ich Prozentwerte verwenden?

Ja, Prozentwerte werden akzeptiert. Sie erzeugen abgerundete Ecken proportional zur Elementgröße. Behalten Sie dieselbe Einheit für alle vier Ecken bei, um ein inkonsistentes Ergebnis zu vermeiden.

Kann das Ergebnis direkt in meine CSS-Datei eingefügt werden?

Ja, das Ergebnis ist eine vollständige CSS-Eigenschaft. Sie können es kopieren und in Ihr Stylesheet einfügen. Stellen Sie nur sicher, dass es nicht von einer anderen Regel überschrieben wird.