KitMul MarkKitMul Text

CSS Border Radius Generator

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 Moeglichkeit, abgerundete Ecken fuer Ihre Webelemente zu gestalten. Passen Sie jede Ecke unabhaengig an oder verknuepfen Sie sie fuer 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.

Deine Daten bleiben in deinem Browser
Tutorial

Anleitung

1
1

Einheit und Verknuepfungsmodus waehlen

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

2
2

Eckwerte anpassen

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

3
3

CSS-Code kopieren

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

Guide

Vollstaendiger Leitfaden zu CSS Border Radius

Border Radius Syntax

Die CSS border-radius-Eigenschaft verwendet Kurzschreibweise. Ein Wert gilt fuer 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 Hoehe. Fuer 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). Gaengige 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 Herstellerpraefixe erforderlich. Aeltere 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 fuer ein sauberes, modernes Aussehen anwenden.

1

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

2

Schritt 2: Ziehen Sie den Schieberegler auf 12px.

3

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

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

Beispiel: Asymmetrische Tab-Form

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

1

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

2

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

3

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

4

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.

Use Cases

Anwendungsfaelle

Pillenfoermige Buttons und Tags

“Pillenfoermige UI-Elemente werden erstellt, indem border-radius auf die Haelfte der Elementhoehe gesetzt wird, normalerweise 9999px oder 50%. Diese Technik wird haeufig fuer Tags, Badges und Call-to-Action-Buttons verwendet, die mit einer glatten, organischen Form hervorstechen muessen.”

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 fuer saubere Inhaltsdarstellung.”

Organische Blob-Formen fuer Hintergruende

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

Haeufig Gestellte Fragen

?Was ist CSS border-radius?

CSS border-radius rundet die Ecken des aeusseren Randes eines Elements ab. Sie koennen einen Wert fuer alle Ecken setzen oder jede Ecke einzeln angeben.

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

Pixelwerte setzen eine feste Radiusgroesse unabhaengig von den Elementdimensionen. Prozentwerte sind relativ zur Elementgroesse, sodass 50% immer einen Kreis bei quadratischen Elementen erzeugt.

?Kann ich verschiedene Werte fuer 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 ermoeglicht es Ihnen, Ecken fuer unabhaengige Steuerung zu trennen.

?Ist dieser Border-Radius-Generator kostenlos?

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

?Sind meine Daten privat und sicher?

Absolut. Dieses Tool laeuft vollstaendig in Ihrem Browser. Keine Daten werden an einen Server uebertragen. Ihre Designs bleiben vollstaendig privat auf Ihrem Geraet.

?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 Hoehe haben, damit das Ergebnis ein perfekter Kreis ist.

Ähnliche Tools

CSS Box Shadow Generator

Generieren Sie CSS box-shadow mit visuellem Editor

Tool testen

CSS-Verlaufsgenerator

Erstellen Sie lineare, radiale und konische CSS-Verläufe

Tool testen

tools.automaticSubtitleGenerator.title

tools.automaticSubtitleGenerator.description

Tool testen
Empfohlene Lektüre

Empfohlene Buecher ueber CSS und Responsives Design

Responsive Web Design with HTML5 and CSS

Responsive Web Design with HTML5 and CSS

Ben Frain

Modern CSS and Responsive Web Design

Modern CSS and Responsive Web Design

Elian Novar

CSS by Building: 250 Hands-On Exercises

CSS by Building: 250 Hands-On Exercises

Laurence Lars Svekis

Als Amazon-Partner verdienen wir an qualifizierten Verkäufen.

Erweitern Sie Ihre Fähigkeiten

Empfohlene Produkte fuer Webdesigner

ASUS ProArt Display 27-Zoll 4K HDR Professioneller Monitor fuer pixelgenaue Designarbeit

ASUS ProArt Display 27-Zoll 4K HDR Professioneller Monitor fuer pixelgenaue Designarbeit

ASUS

Wacom Intuos Small Bluetooth Grafiktablett fuer Designer und Kreative

Wacom Intuos Small Bluetooth Grafiktablett fuer Designer und Kreative

Wacom

Logitech Lift Vertikale Ergonomische Kabellose Maus fuer komfortable Design-Sitzungen

Logitech Lift Vertikale Ergonomische Kabellose Maus fuer komfortable Design-Sitzungen

Logitech

Als Amazon-Partner verdienen wir an qualifizierten Verkäufen.

Wie gefällt Ihnen dieses Tool?

Newsletter

Erhalte Produktivitätstipps und Neue Tools Zuerst

Schließe dich Machern und Entwicklern an, die Datenschutz schätzen. Jede Ausgabe: neue Tools, Produktivitäts-Hacks und Updates — kein Spam.

Prioritätszugang zu neuen Tools
Jederzeit abbestellen, ohne Rückfragen