Border-Radius-Generator

• Live-Vorschau & sofortiges CSS: Der Generator aktualisiert Live-Vorschau und CSS-Ausgabe bei jeder Änderung – kein Button nötig. Sieh genau, wie jeder Eckenradius die Form beeinflusst, und kopiere die CSS-Deklaration mit einem Klick.
• Einheitliche & eckenweise Regler: Wechsle zwischen dem einheitlichen Modus (ein Regler für alle Ecken) und dem eckenweisen Modus (unabhängige Werte für jede Ecke). Wähle deine Einheit – px für Standardboxen und % für elliptische Formen.
• 100 % privat – kein Upload: Die gesamte Border-Radius-Generierung erfolgt lokal in deinem Browser. Deine Designentscheidungen verlassen nie dein Gerät und werden nie an einen Server gesendet – sicher für Kundenprojekte und proprietäre Designsysteme.
• Kostenlos & ohne Limits: Erzeuge unbegrenzt viele Border-Radius-Stile ohne Anmeldung, Abonnement und Nutzungsgrenzen. Der Generator ist für immer völlig kostenlos, ohne Werbung, die die Oberfläche blockiert.

• Karten- & Komponentendesign: UI-Designer nutzen den Generator, um Kartenkomponenten, modale Dialoge, Tooltips und Dropdown-Menüs zu gestalten. Die visuelle Vorschau macht es leicht, den perfekten Eckenradius zu finden, der zum Designsystem passt – von subtilen 4 px bis zu großzügigen 16 px.
• Übergabe von Design an Code: Designer nutzen den Generator, um exakte CSS-Werte aus visuellen Mockups zu extrahieren und an Entwickler zu übergeben. Schluss mit Pixelmessen oder Raten – kopiere die exakte border-radius-CSS-Deklaration und füge sie in den Code ein.
• Bild- & Avatar-Styling: Webentwickler nutzen den Generator, um Profil-Avatare (rund bei 50 %), Produktbilder (abgerundet bei 8–12 px) und Thumbnail-Galerien zu gestalten. Der %-Modus erzeugt perfekte elliptische und kreisförmige Formen für Bilder jedes Seitenverhältnisses.
• Mobile-App-UI-Design: Mobile-Entwickler nutzen den Generator, um Buttonformen, Kartenränder und Bottom-Sheet-Kopfzeilen zu gestalten. Die eckenweise Steuerung ermöglicht asymmetrische Formen, die modernen Mobile-UI-Mustern folgen, wie dem iOS-typischen Squircle-App-Icon.
• CSS-Lernen & Experimentieren: Frontend-Entwickler, die CSS lernen, nutzen den Generator, um visuell zu verstehen, wie border-radius funktioniert. Live-Vorschau und eckenweise Regler machen es leicht zu sehen, wie jeder Wert die endgültige Form beeinflusst – ein perfektes CSS-Lerntool.
• Button- & Formularelement-Styling: UX-Entwickler nutzen den Generator, um Buttons, Eingabefelder, Suchleisten und Formularelemente zu gestalten. Ein einheitlicher border-radius über verwandte Formularelemente hinweg schafft visuelle Konsistenz und ein poliertes Nutzererlebnis.

Die CSS-Eigenschaft border-radius rundet die Ecken der äußeren Randecke eines Elements ab. Du kannst einen einzigen Radius für alle vier Ecken setzen (mit einem Wert wie border-radius: 8px), zwei Werte für diagonale Paare (8px 16px) oder vier Werte für jede Ecke einzeln (8px 4px 8px 4px). Die Reihenfolge ist oben links, oben rechts, unten rechts, unten links – im Uhrzeigersinn von oben beginnend. Unser Border-Radius-Generator verarbeitet all diese Formate und gibt sauberes, produktionsreifes CSS aus.

1. Eingabemodus wählen: Nutze den einheitlichen Modus, um alle vier Ecken mit einem einzigen Regler zu steuern – perfekt für konsistente Rundungen. Wechsle in den Eckenmodus, um jede Ecke unabhängig mit eigenen Zahlenfeldern in einem 2×2-Raster festzulegen, das das Element-Layout widerspiegelt.
2. Werte und Einheit anpassen: Ziehe den Regler oder gib Werte direkt ein. Wechsle zwischen px (Pixel für Rundungen mit fester Größe) und % (Prozentsatz für elliptische/kreisförmige Formen). Die Live-Vorschau aktualisiert sich sofort und zeigt die exakten Eckenradius-Werte über dem Vorschaukasten an.
3. CSS kopieren: Klicke auf „CSS kopieren“, um die produktionsreife CSS-Deklaration in die Zwischenablage zu kopieren. Der Generator gibt das optimale Kurzformat aus – einen Wert, zwei Werte oder vier Werte, je nach Eckenkonfiguration.

• px (Pixel): Rundung mit fester Größe, die sich beim Vergrößern oder Verkleinern des Elements nicht ändert. Nutze px für Standard-UI-Komponenten wie Buttons, Karten und Modals, bei denen du unabhängig von der Elementgröße eine konsistente Eckenrundung möchtest. Die Werte reichen typischerweise von 2 px (subtil) bis 24 px (stark gerundet).
• % (Prozentsatz): Relative Rundung, die mit der Elementgröße skaliert. Nutze 50 %, um einen perfekten Kreis oder eine Pillenform zu erzeugen. Nutze niedrigere Prozentsätze für elliptische Rundungen, die sich an unterschiedliche Elementabmessungen anpassen. Prozentwerte sind für kreisförmige Formen auf 50 % begrenzt.

Die Eigenschaft border-radius wird von allen modernen Browsern ohne Vendor-Präfixe unterstützt. Sie unterstützt auch die logischen Eigenschaftsvarianten border-start-start-radius und weitere für RTL- und vertikale Schreibmodus-Unterstützung. Für kreisförmige Elemente nutze 50 %; für Pillen-Buttons nutze einen Wert größer als die Elementhöhe (z. B. 9999px), der auf den maximal möglichen Radius begrenzt wird.