Wie border-radius mit acht Werten funktioniert
Mit dem border-radius Generator können Sie bis zu acht Werte für horizontale und vertikale Radien eingeben, die jeweils einer Ecke des Elements zugeordnet werden. Die CSS-Syntax border-radius: h1 h2 h3 h4 / v1 v2 v3 v4 ermöglicht asymmetrische und organische Formen, die mit klassischen vier-Werten nicht möglich sind.
Die Vorschau zeigt das Ergebnis direkt im Browser und hilft, komplexe Blob-Formen visuell abzustimmen. Änderungen der Werte werden sofort gerendert, sodass Sie das Verhalten der Ecken und Übergänge nachvollziehen können.
Pixel oder Prozent: Skalierung und Einheit wählen
Sie können die border-radius Werte als Pixel oder Prozent eingeben. Pixel sind absolute Maße und eignen sich für feste Größen, während Prozentwerte sich relativ zur Elementgröße verhalten und daher flexibel für responsive Designs sind.
Bei der Skalierung kann es vorkommen, dass das Aussehen sich bei Größenänderungen unterscheidet. Dies liegt daran, dass Prozentwerte proportional umgerechnet werden, während Pixelwerte fix bleiben. Für dynamische Layouts empfiehlt sich meist die Prozent-Einstellung.
Blob-Formen und Zufall: Kreative Varianten
Im 'Fancy' oder 'Random'-Modus kann der Generator automatisch acht Werte erzeugen, die ungewöhnliche, organische Blob-Formen schaffen. Die Algorithmus-Berechnung erfolgt komplett im Browser, sodass keine Daten übertragen werden und die Privatsphäre geschützt bleibt.
Die generierten CSS-Werte sind kompatibel mit modernen Browsern und können direkt kopiert werden. Sie eignen sich als Ausgangspunkt für Animationen oder individuelle Anpassungen. Beachten Sie, dass extrem große Radien von Browsern automatisch begrenzt werden.
Häufig gestellte Fragen
Wie benutze ich die achtwertige border-radius Syntax?
Die acht Werte werden als vier horizontale und vier vertikale Radien eingegeben. Dies erlaubt differenzierte Formen, indem jeder Ecke ein eigener Radius für beide Achsen zugewiesen wird. Der Generator erstellt daraus die korrekte CSS-Syntax.
Was ist der Unterschied zwischen Pixel und Prozent bei border-radius?
Pixel sind absolute Maße und ändern sich nicht mit der Elementgröße. Prozentwerte hingegen beziehen sich immer auf die aktuelle Größe des Elements und passen sich bei einer Skalierung an. Das beeinflusst, wie die abgerundeten Ecken und Formen auf verschiedenen Geräten wirken.
Warum sieht meine Form anders aus, wenn ich das Element vergrößere?
Bei Prozentwerten werden die Radien proportional zur aktuellen Größe berechnet. Wird das Element größer oder kleiner, verändert sich auch die Form. Pixelwerte bleiben hingegen unverändert, unabhängig von der Größe des Elements.
Kann ich mit CSS zwischen verschiedenen Blob-Formen animieren?
Ja, Sie können border-radius Werte mit CSS-Transitions oder Animationen verändern und so zwischen zwei Blob-Formen überblenden. Die Vorschau zeigt die Ausgangsform, für Animationen müssen Sie die Zwischenwerte selbst definieren.
Wie entstehen die Werte im Random oder Fancy-Modus?
Die Werte werden direkt im Browser anhand festgelegter Algorithmen berechnet, um organische und abwechslungsreiche Formen zu erzeugen. Es werden keine Daten gespeichert oder übertragen.
Ist das generierte CSS in allen Browsern kompatibel?
Die Syntax wird von allen modernen Browsern unterstützt. Bei extremen Werten kann es zu automatischen Begrenzungen durch den Browser kommen, da die Radien maximal die halbe Seitenlänge betragen dürfen.
Probleme oder Ideen zu diesem Werkzeug? Mitteilung senden