Border-Radius-Generator

So nutzen Sie den Border-Radius-Generator

1. Ziehen Sie die Punkte an den Kanten der Vorschau. Jeder farbige Punkt legt den horizontalen Radius einer Ecke fest; ist Elliptische Ecken (8 Werte) aktiviert, steuern die weißen Punkte die vertikalen Radien.
2. Oder geben Sie unter Ecken exakte Werte ein: Oben links, Oben rechts, Unten rechts und Unten links, jeweils mit einem Feld Horizontal und Vertikal.
3. Wählen Sie die Einheit: % (Prozent der Box) oder px (Pixel). Beim Umschalten werden die aktuellen Werte umgerechnet, die Form bleibt also gleich.
4. Stellen Sie Boxbreite (px) und Boxhöhe (px) passend zu Ihrem Element ein und runden Sie mit Alle Ecken sämtliche Ecken auf einmal ab.
5. Probieren Sie die Vorlagen (Abgerundet, Pille, Kreis, Blatt, Tropfen, Ei, Ticket und drei Blobs) oder klicken Sie auf Zufälliger Blob für eine organische Form.
6. Aktivieren Sie Einzelne Eigenschaften (Longhand), wenn Sie lieber die vier Deklarationen border-*-radius verwenden, und übernehmen Sie dann den CSS-Code mit Kopieren.

Tastatur: Fokussieren Sie einen Punkt und ändern Sie seinen Radius mit den Pfeiltasten um einen Schritt (mit Umschalt um 10).

Die Syntax von border-radius

border-radius nimmt ein bis vier Werte in der Reihenfolge oben links, oben rechts, unten rechts, unten links. Wie bei margin werden fehlende Werte von der gegenüberliegenden Ecke übernommen: border-radius: 10px 20px rundet oben links und unten rechts mit 10px ab, die beiden anderen Ecken mit 20px. Das Tool schreibt immer die kürzeste gleichwertige Form.

Jede Ecke ist eigentlich ein Viertel einer Ellipse mit zwei Radien. Ein Schrägstrich trennt die horizontalen von den vertikalen Radien, sodass bis zu acht Werte möglich sind:

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Vor dem Schrägstrich stehen die horizontalen Radien der vier Ecken, danach die vertikalen. Sind beide Listen gleich, entfällt der Teil nach dem Schrägstrich.

Pixel oder Prozent?

• px ergibt unabhängig von der Größe des Elements immer dieselbe Rundung. Das ist die richtige Wahl für Buttons, Karten und Eingabefelder: border-radius: 8px.
• % bezieht sich auf das Element: horizontale Radien auf die Breite, vertikale auf die Höhe. 50% macht aus einem Quadrat einen Kreis und aus einem Rechteck eine Ellipse. Erst Prozentwerte sorgen dafür, dass Blob-Formen mit dem Element mitwachsen.

Für einen pillenförmigen Button verwenden Sie einen Pixelradius von mindestens der halben Höhe. Die Vorlage Pille macht genau das für die eingegebene Boxgröße; ein sehr großer Wert wie 999px funktioniert ebenfalls.

Ergeben benachbarte Radien zusammen mehr als die gemeinsame Seite, verkleinern Browser alle Radien proportional, bis sie passen. Deshalb bricht die Form nicht, wenn Sie zwei Punkte aneinander vorbeiziehen.

Blob-Formen

Die Blob-Vorlagen und Zufälliger Blob verwenden acht Prozentwerte, wobei sich die beiden Punkte jeder Seite zu 100 % ergänzen. So treffen die Kurven genau aufeinander und die Form wirkt wie ein glatter Kieselstein. Mit einer CSS-transition auf border-radius können Sie zwischen zwei Blobs animieren und einen „Morphing“-Effekt erzielen.