Border-Radius-Generator

Es verwandelt ein quadratisches Element in einen perfekten Kreis. Für einen echten Kreis muss das Element gleiche Breite und Höhe haben – zum Beispiel `width: 100px; height: 100px; border-radius: 50%`. Der 50%-Radius trifft sich in der Mitte aller vier Seiten und erzeugt eine perfekte Kurve. Bei einem nicht-quadratischen Element erzeugt 50% stattdessen eine Ellipse – breiter als hoch oder höher als breit, je nach den Abmessungen des Elements. Dies ist der gebräuchlichste Weg, um kreisförmige Avatar-Bilder, runde Buttons und Icon-Container in CSS zu erstellen.

Verwenden Sie `border-radius: 9999px` (oder einen sehr großen Wert wie 100px) auf einem nicht-quadratischen Element wie einem Button oder Badge. Der Browser begrenzt den Radius automatisch auf die Hälfte der kürzeren Dimension des Elements, sodass die kurzen Enden zu perfekten Halbkreisen werden, während die langen Seiten gerade bleiben. Dies erzeugt die klassische Pill-förmige CTA-Schaltfläche, die in den meisten modernen Design-Systemen zu finden ist. Der `9999px`-Trick funktioniert unabhängig von der Elementgröße – keine manuelle Berechnung der halben Höhe erforderlich. Die Pill-Vorlage in diesem Generator wendet dieses Muster sofort an.

Pixel-Werte sind absolut – ein `12px`-Radius bleibt 12 Pixel, unabhängig von der Größe des Elements. Wenn das Element größer oder kleiner wird, bleibt die Eckengröße fest. Prozent-Werte sind relativ – `50%` wölbt sich immer genau bis zum Mittelpunkt jeder Seite und erzeugt eine proportionale Form, die mit dem Element skaliert. Verwenden Sie Prozent (`50%`) für Formen wie Kreise und Pills, die mit dem Element skalieren sollen. Verwenden Sie Pixel für UI-Komponenten wie Karten, Buttons und Eingabefelder, bei denen Sie eine konsistente, im Design-System definierte Eckengröße unabhängig vom Inhalt wünschen.

Ein standardmäßiger `border-radius` wölbt Ecken nur nach außen (konvex). Für eine invertierte oder konkave Ecke – die nach innen gerichtete "Kerbe" oder "Ausschnitt"-Kurve, die bei Tickets, Tabs und Sprechblasen verwendet wird – kann `border-radius` allein nicht verwendet werden. Die gängige Technik ist eine Radial-Gradient-Maske: `mask: radial-gradient(circle 20px at top left, transparent 98%, black) top left / 51% 51% no-repeat ...`, wiederholt für jede Ecke, die nach innen gebogen werden soll. Eine Alternative ist ein positioniertes Pseudo-Element (`::before`) mit der Hintergrundfarbe der Seite und einem eigenen nach außen gerichteten `border-radius`, das über eine Ecke gelegt wird, sodass es eine konkave Form ausschneidet. Für Ticket-Kanten mit Perforationslinie erzeugt eine wiederholende Radial-Gradient-Maske entlang einer Seite den gezackten Rand. "Invertierter Border-Radius" ist also eigentlich ein Masken-Trick und kein Border-Radius-Wert – nützlich zu wissen, wenn man nach einem invertierten Border-Radius-Generator sucht.

Verwenden Sie individuelle Ecken-Eigenschaften: `border-top-left-radius`, `border-top-right-radius`, `border-bottom-right-radius` oder `border-bottom-left-radius`. Zum Beispiel rundet `border-bottom-right-radius: 24px` nur die untere rechte Ecke ab und lässt die anderen drei scharf. Sie können sie beliebig kombinieren: `border-top-left-radius: 16px; border-bottom-right-radius: 16px` erzeugt eine diagonal gerundete Form. In der Kurzschreibweise setzen zwei Werte entgegengesetzte Eckenpaare: `border-radius: 16px 0` rundet die obere linke und untere rechte Ecke ab und lässt die obere rechte und untere linke Ecke scharf.

Im Uhrzeigersinn von oben links: Oben-links → Oben-rechts → Unten-rechts → Unten-links. So gibt `border-radius: 16px 8px 0 8px` der oberen linken Ecke 16px, der oberen rechten 8px, der unteren rechten 0 und der unteren linken 8px. Dies entspricht der standardmäßigen CSS-Kurzschreibweise-Richtung, die von `margin`, `padding` und `border-width` verwendet wird. Mit zwei Werten gilt der erste für oben-links und unten-rechts; der zweite für oben-rechts und unten-links. Mit drei Werten gilt der zweite für oben-rechts und unten-links. Ein Wert gilt gleichmäßig für alle vier Ecken.

Ja – wenden Sie `border-radius` direkt auf das `<img>`-Element an: `img { border-radius: 50%; width: 100px; height: 100px; }` für einen kreisförmigen Avatar. Alternativ können Sie das Bild in ein `<div>` mit `overflow: hidden` einwickeln und border-radius auf den Wrapper anwenden, was Ihnen mehr Layout-Kontrolle gibt. Nutzen Sie die Bild-Upload-Funktion dieses Tools, um zu sehen, wie Ihr Radius auf Ihrem eigentlichen Foto aussieht, bevor Sie das CSS kopieren. Dies ist besonders nützlich für Avatar-Ausschnitte, Medien-Karten-Thumbnails und Galerie-Layouts, bei denen die genaue Beschnittform das Design beeinflusst.

Setzen Sie drei Ecken auf einen großen Wert und lassen Sie eine bei null: `border-radius: 50% 50% 50% 0`. Kombiniert mit `transform: rotate(-45deg)` ergibt dies die klassische Kartennadel-Tropfenform. Passen Sie an, welche Ecke null ist, um den Tropfen in verschiedene Richtungen zu zeigen: `0 50% 50% 50%` zeigt nach links, `50% 0 50% 50%` zeigt nach rechts. Die Ecke bei null erzeugt die spitze Spitze; die drei Ecken mit großem Radius bilden den runden Körper. Nützlich für Standortmarkierungen, Zeiger und dekorative Akzente in illustrationsartigem UI.

Der Schrägstrich trennt horizontale und vertikale Radien für jede Ecke. Die Syntax lautet: `border-radius: [horizontale Radien] / [vertikale Radien]`. Zum Beispiel erzeugt `border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%` eine ei-artige Form, bei der jede Ecke eine asymmetrische elliptische Kurve hat. Der Zufalls-Blob-Generator in diesem Tool verwendet diese Syntax, um organische, asymmetrische Formen zu erzeugen – beliebt für Hero-Abschnitt-Hintergründe, dekorative Blobs und illustrationsartige Design-Elemente. Jede Ecke kann ein anderes Verhältnis von horizontalem zu vertikalem Radius haben.

cssmatic.coms Border-Radius-Tool ist funktional, aber veraltet – es fehlen Bild-Upload, Blob-Generierung und eine Vorlagen-Bibliothek. Das css-tricks.com Almanac ist eine hervorragende Dokumentation, aber kein interaktiver Generator. bennettfeely.coms Clip-Path-Maker überschneidet sich im Anwendungsfall, zielt aber auf clip-path statt border-radius ab. UtiloKits Generator bietet: Live-Vorschau mit Bild-Upload (vollständig clientseitig verarbeitet), Form-Vorlagen (Kreis, Pill, Karte, Ei, Blob), zufällige Blob-Generierung mit der 8-Wert-Slash-Syntax, px/%-Einheitenwechsel und drei Kopierformate. Keine Werbung, keine Wasserzeichen, keine Anmeldung und nichts wird an einen Server gesendet.

Nein – das Bild wird ausschließlich über die File API des Browsers geladen und verlässt Ihr Gerät nie. Das Vorschau-Element rendert das Bild lokal mit einem `createObjectURL()`-Aufruf, der vollständig im Browser-Speicher bleibt. Kein Upload, keine Serververarbeitung, keine Cloud-Speicherung. Dieselbe clientseitige Architektur gilt für alle anderen Funktionen: Schieberegler-Eingaben, CSS-Generierung, Blob-Randomisierung und Zwischenablage-Kopieren laufen alle in JavaScript ohne Netzwerkanfrage nach dem initialen Laden der Seite. Ihre Bilder und Designarbeit bleiben vollständig privat.

`border-radius` ist über CSS-Übergänge und Keyframe-Animationen vollständig animierbar. Verwenden Sie `transition: border-radius 0.3s ease`, um beim Hover reibungslos zwischen zwei Werten zu interpolieren. Verwenden Sie `@keyframes`, um kontinuierlich zwischen Formen zu morphen – die Animation von `0` auf `50%` lässt ein Quadrat zu einem Kreis pulsieren. Das Morphen zwischen zwei Blob-Formen (verschiedene 8-Wert-Slash-Werte) erzeugt fließende, organische Animationen, die in Hero-Hintergründen beliebt sind. Beachten Sie, dass die Animation von border-radius bei jedem Frame ein Repaint auslöst – verwenden Sie daher `will-change: border-radius` für häufig animierte Elemente.

`border-radius` ist rein visuell – es beschneidet das gemalte Erscheinungsbild des Elements, ändert aber nicht seine Layout-Box, den Rand-Bereich oder den Pointer-Event-Trefferbereich. Die unsichtbaren eckigen Ecken sind weiterhin anklickbar und belegen weiterhin ihren Layout-Platz. Dies ist für Touch-Interfaces wichtig: Ein kreisförmiger Button hat immer noch einen quadratischen klickbaren Bereich an seinen Ecken. Wenn Sie benötigen, dass der Trefferbereich der abgerundeten Form genau folgt, verwenden Sie stattdessen `clip-path: circle()`, das auch Pointer-Events beschneidet. `box-shadow` folgt `border-radius` korrekt; `outline` tut dies in den meisten Browsern nicht – verwenden Sie `box-shadow: 0 0 0 3px farbe` als abgerundete Fokusring-Alternative.

Ja – das Tool ist vollständig responsiv und funktioniert in jedem modernen mobilen Browser. Auf dem iPhone verwenden Sie es in Safari oder Chrome ohne Installation. Auf Android funktionieren Chrome, Firefox und Edge. Die Schieberegler sind touch-freundlich mit ordentlich dimensionierten Ziehpunkten. Der Bild-Upload verwendet die native Dateiauswahl auf mobilen Geräten und ermöglicht die Auswahl aus Ihrer Kamerarolle oder der Dateien-App. Das Kopieren von CSS in die Zwischenablage funktioniert über die Standard-Web-Clipboard-API, die von allen modernen mobilen Browsern unterstützt wird. Das gesamte Tool läuft clientseitig, sodass kein App-Download, kein Konto und keine Datenübertragung erforderlich ist.