Wie generiere ich CSS-Border-Radius für jede Ecke?

Deaktivieren Sie Einheitlich (alle Ecken gleich) und stellen Sie den Schieberegler jeder Ecke ein, während Sie die Vorschau beobachten. Wählen Sie die Einheit px oder % und drücken Sie dann Kopieren, um die border-radius-Deklaration zu erhalten.

Wie erstelle ich eine organische Blob-Form mit CSS?

Aktivieren Sie Elliptisch (X / Y-Syntax), um horizontale und vertikale Radien pro Ecke separat festzulegen, oder drücken Sie Zufälliger Blob. Die Ausgabe verwendet die Schrägstrich-Syntax, zum Beispiel 32px 20px 20px 32px / 20px 32px 20px 32px.

Sollte ich px oder Prozent für den Border-Radius verwenden?

Verwenden Sie px für eine feste Eckengröße unabhängig von der Box-Größe. Verwenden Sie % für Radien relativ zum Element, z. B. 50 % für einen Kreis auf einem Quadrat. Die Steuerung Einheit schaltet zwischen ihnen um; die Schieberegler gehen bis 200 px oder 100 Prozent.

Kann ich das Ergebnis als Tailwind-Klasse kopieren?

Ja. Schalten Sie das Ausgabeformat auf Tailwind um, um eine Arbitrary-Value-Klasse wie rounded-[...] anstelle der CSS-Deklaration zu kopieren.

Kann ich den Radius bei einer anderen Box-Größe testen?

Ja. Die Schieberegler für Breite und Höhe skalieren die Vorschau von 64 bis 320 px, sodass Sie prüfen können, wie derselbe Radius auf schmalen, breiten oder hohen Elementen aussieht.

Ist es wirklich kostenlos?

Ja. Jedes Tool ist kostenlos nutzbar, ohne Konto und ohne Kreditkarte. Die Verarbeitung läuft auf Ihrem Gerät statt auf unseren Servern – genau deshalb können wir den Dienst kostenlos betreiben.

Funktioniert es auf Mobilgeräten?

Ja. Es läuft in aktuellen mobilen Browsern unter iOS und Android, ohne dass etwas installiert werden muss.

◖

CSS-Border-Radius-Generator – kostenlos

Gestalten Sie abgerundete Ecken visuell mit unabhängiger Steuerung jeder Ecke. Unterstützt die elliptische X/Y-Syntax für organische Blob-Formen.

Läuft in Ihrem BrowserKein Konto, keine Pop-upsKeine Anmeldung erforderlichFür immer kostenlos

Funktioniert nach dem Laden offline

border-radius: 20px 20px 20px 20px;

Einheitlich (alle Ecken gleich)Elliptisch (X / Y-Syntax)

Einheit

Farbe:

Breite (192px)

Höhe (192px)

Alle Ecken (20px)

Häufige Anwendungen

Organische BlobformenNutzen Sie die elliptische X/Y-Syntax, um einzigartige Blobformen für Hero-Abschnitte und Illustrationen zu erstellen.
Karten- und Container-EckenStandard-Eckenrundungen für Karten, Container und Panels im modernen UI-Design.
Avatar- und ProfilbildformenErstellen Sie den richtigen Eckenstil für Profilfotos: kreisförmig, squircle oder abgerundetes Quadrat.
Pillen, Tags und AbzeichenBauen Sie perfekt abgerundete Pillen-Schaltflächen, Tags und Abzeichen mit der Voreinstellung 9999.
Asymmetrische EckenentwürfeMischen Sie Radien über Ecken, um markante, markenerkenntliche Karten- und Schaltflächenformen zu erstellen.

So funktioniert es

Der Border-Radius-Generator läuft vollständig im Browser – kein Server, keine Bibliothek, kein Upload. Er erzeugt den CSS-Wert für border-radius direkt in JavaScript mit React-State und useMemo und wendet ihn als Inline-Style auf ein Live-div an, sodass die CSS-Engine des Browsers die Form in Echtzeit darstellt.

1
Regler schreiben den Zustand
Jeder Bereichsregler schreibt in eine von acht numerischen Zustandsvariablen – vier horizontale Eckradien und vier vertikale für den elliptischen Modus. Der einheitliche Modus fasst alle acht über eine setAll-Hilfsfunktion, die alle Werte gleichzeitig synchronisiert, in einem Regler zusammen.
2
useMemo setzt den CSS-Wert zusammen
Ein useMemo-Hook berechnet die border-radius-Zeichenkette neu, sobald sich ein Eckwert, die Einheit (px oder %) oder der Ellipsen-Schalter ändert. Im Standardmodus erzeugt er die Kurzform mit vier Werten; mit Ellipse fügt er den Schrägstrich für die vollständige Syntax mit acht Werten hinzu – z. B. 32px 20px 20px 32px / 20px 32px 20px 32px.
3
Die CSS-Engine des Browsers rendert die Vorschau
Die berechnete Zeichenkette wird als Inline-Style borderRadius auf ein einfaches div gesetzt. Die Layout-Engine des Browsers übernimmt das gesamte Rendering – kein Canvas, kein SVG und kein Zeichencode von Drittanbietern.
4
Die Clipboard API kopiert die Ausgabe
Ein Klick auf Kopieren ruft navigator.clipboard.writeText entweder mit der CSS-Deklaration (border-radius: ...;) oder der entsprechenden Tailwind-Klasse mit beliebigem Wert (rounded-[...]) auf, je nach gewähltem Format.

CSS-Border-Radius-Generator – kostenlos

Häufige Anwendungen

So funktioniert es

Ähnliche Tools

CSS-Box-Shadow-Generator

CSS-Grid-Generator

CSS-Flexbox-Generator

Häufige Fragen