Erstelle einfaches, eckenspezifisches oder Blob-CSS für border-radius mit Live-Vorschau. Alles läuft direkt in deinem Browser.
CSS Border-Radius-Generator Online
Erstelle einfaches, eckenspezifisches oder Blob-CSS für border-radius mit Live-Vorschau. Alles läuft direkt in deinem Browser.
Der CSS-Border-Radius-Generator läuft vollständig in deinem Browser. Die eingegebenen Werte und das generierte CSS verlassen niemals dein Gerät und werden nicht an ArrayKit hochgeladen.
Der CSS-Border-Radius-Generator erstellt eine border-radius-Deklaration, die du direkt in dein Stylesheet einfügen kannst, mit einer Live-Vorschau, die sich beim Anpassen sofort aktualisiert. Wechsle zwischen dem Simple-Modus für einen einzigen Radius an allen vier Ecken, dem Per-Corner-Modus, um jede Ecke unabhängig abzurunden, und dem Blob-Modus für die achtwertige elliptische Form, mit der Designer eine organische, handgezeichnete Form nachbilden. Wähle px, % oder rem, ziehe die Werte oder klicke im Blob-Modus auf Zufällig, um Formen zu entdecken, die du von Hand nicht eingeben würdest. Nützlich für Buttons, Karten, Avatare, Hero-Blobs und jede Komponente, bei der abgerundete Ecken vor dem Übernehmen des CSS genau richtig aussehen müssen. Entwickelt für Frontend-Entwickler und Designer, die sofortiges visuelles Feedback wollen. Alles läuft lokal in deinem Browser — es werden keine Styles oder Markups hochgeladen.
Funktionen
Der Simple-Modus rundet alle vier Ecken mit einem einzigen Wert und einem Schieberegler ab
Der Per-Corner-Modus setzt oben-links, oben-rechts, unten-rechts und unten-links unabhängig voneinander
Der Blob-Modus erzeugt den achtwertigen elliptischen border-radius für organische Formen
Ein-Klick-Button Zufällig im Blob-Modus zum schnellen Erkunden von Formen
Wechsel zwischen den Einheiten px, % und rem für einfachen und eckenspezifischen Radius
Die quadratische Live-Vorschau aktualisiert sich sofort bei jeder Änderung
Kopierfertige CSS-Deklaration mit einem Klick
Läuft vollständig in deinem Browser, ohne dass CSS jemals hochgeladen wird
So verwendest du Border-Radius-Generator
Wähle Simple-, Per-Corner- oder Blob-Modus
Passe den Schieberegler, die Zahlenfelder oder die Blob-Prozentwerte an
Beobachte, wie sich die Live-Vorschau in Echtzeit aktualisiert
Kopiere die generierte border-radius-CSS-Deklaration
Beispiel
Eingabe
all corners 12px
Ausgabe
border-radius: 12px;
Vier gleiche Ecken werden zu einem einzigen border-radius-Wert zusammengefasst.
Häufige Fehler & Fehlerbehebung
Die Blob-Form sieht aus wie ein abgerundetes Rechteck statt wie eine organische Form. — Stelle sicher, dass sich horizontaler und vertikaler Prozentwert je Ecke unterscheiden — gleiche H- und V-Werte an allen Ecken erzeugen nur eine einfache abgerundete Form.
Das eckenspezifische CSS fällt unerwartet wieder auf einen einzigen Wert zurück. — Das ist beabsichtigt: Stimmen alle vier Ecken überein, gibt der CSS-Border-Radius-Generator die kürzere Einzelwert-Kurzschreibweise aus, statt dieselbe Zahl viermal zu wiederholen.
Ein Prozent-Radius sieht bei einem nicht quadratischen Element anders aus. — Ein Prozent-border-radius bezieht sich auf die eigene Breite und Höhe des Elements, daher wirkt derselbe Prozentwert bei einem breiten Rechteck anders als bei einem Quadrat — teste ihn am tatsächlichen Seitenverhältnis deines Elements.
Die abgerundete Ecke verschwindet bei einem sehr kleinen Element. — border-radius ist auf die Hälfte der kürzeren Seite des Elements begrenzt, daher wird ein großer px-Radius auf einer kleinen Box einfach zu einer vollen Pille oder einem Kreis statt überzulaufen.
Häufig gestellte Fragen
Was erzeugt der Blob-Modus des CSS-Border-Radius-Generators genau?
Er erzeugt die achtwertige elliptische border-radius-Syntax — vier horizontale Prozentwerte, einen Schrägstrich, dann vier vertikale Prozentwerte, ein Paar pro Ecke — der Standardtrick für organisch, handgezeichnet wirkende Formen in CSS.
Kann der CSS-Border-Radius-Generator Prozent oder rem statt Pixel ausgeben?
Ja. In den Modi Simple und Per-Corner kannst du die Einheit zwischen px, % und rem wechseln, und die Live-Vorschau sowie das generierte CSS aktualisieren sich sofort entsprechend.
Warum gibt der Per-Corner-Modus manchmal einen einzigen statt vier Werte aus?
Wenn alle vier Ecken am Ende gleich sind, reduziert das Tool den border-radius automatisch auf die kürzere Einzelwert-Form — das ist gültiges, gleichwertiges CSS und hält dein Stylesheet übersichtlicher.
Lädt der CSS-Border-Radius-Generator mein Design oder CSS irgendwohin hoch?
Nein. Jede Berechnung und die Live-Vorschau laufen lokal in deinem Browser. Die eingegebenen Werte und das generierte CSS verlassen niemals dein Gerät.
Wofür ist der Zufällig-Button im Blob-Modus?
Er füllt alle acht Blob-Prozentwerte mit einem Klick mit neuen Zufallswerten, sodass du schnell organische Formvarianten erkunden kannst, statt jede Ecke von Hand einzugeben.
Wird das generierte border-radius-CSS in allen modernen Browsern unterstützt?
Ja. Sowohl die Standard-Kurzschreibweise als auch die achtwertige elliptische Blob-Syntax sind Teil der CSS-Backgrounds-and-Borders-Spezifikation und funktionieren in allen aktuellen wichtigen Browsern.