CSS Border Radius Generator

Name: CSS Border Radius Generator
Author: Kitmul

Gestalten Sie benutzerdefinierte CSS border-radius-Werte mit einem visuellen Editor. Steuern Sie jede Ecke unabhaengig oder verknuepft.

Der CSS Border Radius Generator bietet eine visuelle Möglichkeit, abgerundete Ecken für Ihre Webelemente zu gestalten. Passen Sie jede Ecke unabhaengig an oder verknuepfen Sie sie für einheitliche Rundung. Wechseln Sie zwischen Pixel- und Prozenteinheiten, sehen Sie die Form in Echtzeit und kopieren Sie den generierten CSS-Code sofort. Alles laeuft in Ihrem Browser ohne Serverinteraktion.

Live-Vorschau

Vorschaufarbe

Oben Links 16px

Oben Rechts 16px

Unten Rechts 16px

Unten Links 16px

CSS-Code

border-radius: 16px;

Deine Daten bleiben in deinem Browser

War dieses Tool hilfreich?

Dieses Tool bewerten

Anleitung

Einheit und Verknuepfungsmodus wählen

Wählen Sie Pixel oder Prozent und aktivieren Sie den verknuepften Modus, um alle Ecken gleichzeitig oder einzeln zu steuern.

Eckwerte anpassen

Ziehen Sie die Schieberegler für jede Ecke, um den gewuenschten Randradius einzustellen und beobachten Sie die Vorschau.

CSS-Code kopieren

Klicken Sie auf Kopieren, um die generierte CSS border-radius-Eigenschaft in die Zwischenablage für Ihr Projekt zu kopieren.

Guide

Vollständiger Leitfaden zu CSS Border Radius

Border Radius Syntax

Die CSS border-radius-Eigenschaft verwendet Kurzschreibweise. Ein Wert gilt für alle Ecken. Zwei Werte setzen die Paare oben-links/unten-rechts und oben-rechts/unten-links. Drei Werte setzen oben-links, oben-rechts/unten-links und unten-rechts. Vier Werte setzen jede Ecke im Uhrzeigersinn.

Kreise und Ellipsen erstellen

Ein perfekter Kreis erfordert border-radius: 50% bei einem Element mit gleicher Breite und Höhe. Für elliptische Formen verwenden Sie die Schraegsttrich-Notation: border-radius: 50% / 25% erzeugt eine horizontale Ellipse. Diese erweiterte Syntax erlaubt separate horizontale und vertikale Radien.

Abgerundete Ecken in Design-Systemen

Design-Systeme definieren typischerweise eine Skala von border-radius-Tokens von none (0) bis full (9999px). Gängige Skalen umfassen sm (4px), md (8px), lg (16px), xl (24px) und full (9999px). Konsistente Verwendung dieser Tokens sichert visuelle Harmonie.

Browser-Unterstuetzung und Fallbacks

CSS border-radius hat universelle Browser-Unterstuetzung in allen modernen Browsern. Keine Herstellerpräfixe erforderlich. Ältere Browser ohne Unterstuetzung zeigen einfach eckige Ecken als graceful Fallback, was die Verwendung ohne bedingte Logik sicher macht.

Sources

Examples

Geloeste Beispiele

Beispiel: Abgerundete Karte mit 12px Ecken

Ziel: Einheitliche 12px abgerundete Ecken auf eine Kartenkomponente für ein sauberes, modernes Aussehen anwenden.

Schritt 1: Aktivieren Sie den verknuepften Modus, damit alle Ecken zusammen aktualisiert werden.

Schritt 2: Ziehen Sie den Schieberegler auf 12px.

Schritt 3: Kopieren Sie das CSS: border-radius: 12px;

Ergebnis: Eine Karte mit gleichmaessig abgerundeten Ecken, die gängigen Design-System-Mustern entspricht.

Beispiel: Asymmetrische Tab-Form

Ziel: Eine Tab-Komponente mit nur den oberen Ecken abgerundet erstellen.

Schritt 1: Deaktivieren Sie den verknuepften Modus, um Ecken unabhaengig zu steuern.

Schritt 2: Setzen Sie oben-links und oben-rechts auf 8px.

Schritt 3: Belassen Sie unten-links und unten-rechts bei 0px.

Schritt 4: Kopieren Sie das CSS: border-radius: 8px 8px 0px 0px;

Ergebnis: Ein tab-foermiges Element mit abgerundeten oberen Ecken und geraden unteren Kanten.

Anwendungsfälle

Anwendungsfaelle

Pillenfoermige Buttons und Tags

“Pillenfoermige UI-Elemente werden erstellt, indem border-radius auf die Haelfte der Elementhöhe gesetzt wird, normalerweise 9999px oder 50%. Diese Technik wird häufig für Tags, Badges und Call-to-Action-Buttons verwendet, die mit einer glatten, organischen Form hervorstechen müssen.”

Abgerundete Kartencontainer

“Kartenbasierte Layouts verwenden konsistente border-radius-Werte, um einen kohaerenten visuellen Rhythmus zu erzeugen. Typische Werte reichen von 8px bis 16px und geben Karten ein freundliches Erscheinungsbild bei ausreichender Struktur für saubere Inhaltsdarstellung.”

Organische Blob-Formen für Hintergruende

“Asymmetrische border-radius-Werte an allen vier Ecken erzeugen organische Blob-Formen als dekorative Hintergrundelemente. Durch sehr unterschiedliche Werte pro Ecke entstehen einzigartige fließende Formen ohne SVG oder komplexe clip-path-Regeln.”

Häufig Gestellte Fragen

?Was ist CSS border-radius?

CSS border-radius rundet die Ecken des aeusseren Randes eines Elements ab. Sie können einen Wert für alle Ecken setzen oder jede Ecke einzeln angeben.

?Was ist der Unterschied zwischen px- und %-Einheiten?

Pixelwerte setzen eine feste Radiusgröße unabhaengig von den Elementdimensionen. Prozentwerte sind relativ zur Elementgröße, sodass 50% immer einen Kreis bei quadratischen Elementen erzeugt.

?Kann ich verschiedene Werte für jede Ecke setzen?

Ja, CSS border-radius akzeptiert bis zu vier Werte in der Reihenfolge: oben-links, oben-rechts, unten-rechts, unten-links. Dieses Tool ermöglicht es Ihnen, Ecken für unabhaengige Steuerung zu trennen.

?Ist dieser Border-Radius-Generator kostenlos?

Ja, dieses Tool ist völlig kostenlos ohne Registrierung, ohne Limits und ohne Premium-Funktionen hinter einer Bezahlschranke. Unbegrenzt nutzbar.

?Sind meine Daten privat und sicher?

Absolut. Dieses Tool laeuft vollständig in Ihrem Browser. Keine Daten werden an einen Server übertragen. Ihre Designs bleiben vollständig privat auf Ihrem Gerät.

?Wie erstelle ich einen perfekten Kreis mit border-radius?

Setzen Sie border-radius auf 50% bei einem quadratischen Element. Das Element muss gleiche Breite und Höhe haben, damit das Ergebnis ein perfekter Kreis ist.

Hilf uns besser zu werden

Wie gefällt Ihnen dieses Tool?

Jedes Tool bei Kitmul wird auf Basis echter Nutzeranfragen gebaut. Ihre Bewertung und Ihre Vorschläge helfen uns, Bugs zu beheben, fehlende Funktionen hinzuzufügen und die Tools zu bauen, die Sie wirklich brauchen.

Empfohlene Bücher über CSS und Responsives Design

Responsive Web Design with HTML5 and CSS

Erweitern Sie Ihre Fähigkeiten

Empfohlene Produkte für Webdesigner

ASUS ProArt Display 27-Zoll 4K HDR Professioneller Monitor für pixelgenaue Designarbeit

CSS Border Radius Generator

Live-Vorschau

CSS-Code

Anleitung

Einheit und Verknuepfungsmodus wählen

Eckwerte anpassen

CSS-Code kopieren

Vollständiger Leitfaden zu CSS Border Radius

Border Radius Syntax

Kreise und Ellipsen erstellen

Abgerundete Ecken in Design-Systemen

Browser-Unterstuetzung und Fallbacks

Geloeste Beispiele

Beispiel: Abgerundete Karte mit 12px Ecken

Beispiel: Asymmetrische Tab-Form

Anwendungsfaelle

Pillenfoermige Buttons und Tags

Abgerundete Kartencontainer

Organische Blob-Formen für Hintergruende

Häufig Gestellte Fragen

?Was ist CSS border-radius?

?Was ist der Unterschied zwischen px- und %-Einheiten?

?Kann ich verschiedene Werte für jede Ecke setzen?

?Ist dieser Border-Radius-Generator kostenlos?

?Sind meine Daten privat und sicher?

?Wie erstelle ich einen perfekten Kreis mit border-radius?

Wie gefällt Ihnen dieses Tool?

Ähnliche Tools

Button CSS Generator

CSS Box Shadow Generator

CSS-Verlaufsgenerator

Empfohlene Bücher über CSS und Responsives Design

Responsive Web Design with HTML5 and CSS

Modern CSS and Responsive Web Design

CSS by Building: 250 Hands-On Exercises

Empfohlene Produkte für Webdesigner

ASUS ProArt Display 27-Zoll 4K HDR Professioneller Monitor für pixelgenaue Designarbeit

Wacom Intuos Small Bluetooth Grafiktablett für Designer und Kreative

Logitech Lift Vertikale Ergonomische Kabellose Maus für komfortable Design-Sitzungen

Erhalte Produktivitätstipps und Neue Tools Zuerst

Live-Vorschau

CSS-Code