Border Radius Generator

Über dieses Tool

Die border-radius-Eigenschaft rundet die Ecken eines Elements ab. Wenn alle vier Werte gleich sind, wird eine Kurzform mit einem einzelnen Wert verwendet. Verschiedene Werte erzeugen asymmetrische Formen — die Pillenform verwendet 50% an allen Ecken, die Blattform wechselt zwischen 0% und 50%.

Klicke auf eine Ecknummer, um direkt einen Wert einzugeben, oder ziehe den verknüpften Schieberegler, um alle vier Ecken gleichzeitig zu ändern. Deaktiviere Alle Ecken sperren, um jede Ecke unabhängig zu steuern.

Anleitung

1. Gib Werte in die vier Eckfelder ein (oben-links, oben-rechts, unten-links, unten-rechts).
2. Aktiviere Alle Ecken sperren, um alle vier Werte gleichzeitig mit dem Schieberegler zu setzen.
3. Wechsle je nach Designanforderung zwischen px- und %-Einheiten.
4. Klicke auf ein Preset (Pille, Blatt, Blob usw.), um sofort eine vordefinierte Form anzuwenden.

Anwendungsfälle

UI-Designer verwenden border-radius, um Schaltflächen, Karten und Avatar-Formen zu erstellen. Entwickler passen abgerundete Ecken an Marken-Designsysteme an. Die Pillenform (50%) wird häufig für Tags und Badges verwendet. Asymmetrische Werte erzeugen organische Blatt- oder Blob-Formen für dekorative Elemente.

Häufige Fragen

• Was ist der Unterschied zwischen px und %? — px gibt einen festen Eckenradius unabhängig von der Elementgröße. % ist relativ zur Breite und Höhe des Elements — 50% an allen Ecken ergibt einen perfekten Kreis (wenn das Element quadratisch ist).
• Kann ich für jede Ecke verschiedene Radien festlegen? — Ja. Hebe die Auswahl von Alle Ecken sperren auf und gib in jedem Eckfeld verschiedene Werte ein.
• Was bedeutet die Kurzform-Ausgabe? — Wenn alle vier Ecken gleich sind, wird ein einzelner Wert ausgegeben. Bei unterschiedlichen Werten lautet die CSS-Reihenfolge: oben-links, oben-rechts, unten-rechts, unten-links.