CSS-border-radius-Generator

Passen Sie die vier Ecken eines Elements unabhängig voneinander an und erhalten Sie sofort den entsprechenden CSS-Wert border-radius mit Live-Vorschau.

Beispiel:

So funktioniert es

Die CSS-Eigenschaft border-radius kann bis zu vier Werte erhalten, einen pro Ecke, in der Reihenfolge oben-links, oben-rechts, unten-rechts, unten-links. Mit diesem Tool können Sie jede Ecke unabhängig einstellen und das Ergebnis vor dem Kopieren des Codes visualisieren.

Wie erstellt man eine perfekt runde oder ovale Form?

Stellen Sie alle vier Ecken mit der Einheit „%“ auf einen Wert von 50%: bei einem quadratischen Element ergibt dies einen perfekten Kreis, bei einem Rechteck eine Ellipse.

Warum unterschiedliche Werte je nach Ecke verwenden?

Asymmetrische Ecken ermöglichen es, organische Formen oder „Tropfen“-Effekte zu erzeugen, die oft für Benachrichtigungs-Bubbles oder dekorative Elemente verwendet werden.

100% lokale Verarbeitung: Die Berechnung erfolgt vollständig in Ihrem Browser über WebAssembly, ohne dass Daten an einen Server gesendet werden.