CSS Border Radius Generator

Corner Radii

Top Left

12px

Top Right

12px

Bottom Right

12px

Bottom Left

12px

Presets

Lock corners together

Preview

Preview Box

CSS Code

border-radius: 12px 12px 12px 12px;

es ermöglicht Benutzern, abgerundete Ecken für jedes HTML-Element visuell einzustellen und generiert sofort den CSS-border-radius-Eigenschaftscode – kein manuelles Schreiben erforderlich.

Was ist CSS Border Radius?

Erklären Sie die CSS-Eigenschaft border-radius: was sie bewirkt (rundet die Ecken des äußeren Randes eines Elements ab), die vier einzelnen Ecken (oben links, oben rechts, unten rechts, unten links) und wie Werte in px, %, em oder rem ausgedrückt werden können. Erwähnen Sie, dass alle vier Ecken unabhängig voneinander für asymmetrische Designs eingestellt werden können.

Wie benutzt man den CSS Border Radius Generator?

Ein einfacher Schritt-für-Schritt-Bereich:

Ziehen Sie die Schieberegler, um den Radiuswert für jede Ecke einzustellen (Oben Links, Oben Rechts, Unten Rechts, Unten Links).
Aktivieren Sie Ecken sperren, um gleichzeitig einen einheitlichen Radius für alle vier Ecken anzuwenden.
Verwenden Sie die Voreinstellungs-Buttons für sofortige gängige Formen: scharfe Quadrate, abgerundete Rechtecke, volle Kreise/Pillen oder diagonale Kurven.
Beobachten Sie, wie sich die Live-Vorschau in Echtzeit aktualisiert.
Kopieren Sie den generierten CSS-Code mit einem Klick.

Erklärung der Border Radius Voreinstellungen

Behandeln Sie die vier integrierten Voreinstellungen und ihre Anwendungsfälle:

Scharf (0px) – für flache, moderne UI-Karten und Tabellenzellen.
Abgerundet (8px) – die gebräuchlichste UI-Konvention; verwendet in Buttons, Karten, Modals.
Pill / Kreis (999px) – für Abzeichen, Tags, Avatar-Bilder und CTA-Buttons.
Diagonal (999px / 0px abwechselnd) – für kreative asymmetrische Designelemente, beliebt auf Landingpages.

Ecken sperren vs. einzelne Eckeneinstellung

Erklären Sie den Unterschied zwischen einem einheitlichen border-radius (z. B. border-radius: 12px) und dem Vier-Werte-Kurzschreibweise (z. B. border-radius: 12px 0px 12px 0px). Beschreiben Sie, wann der Sperrmodus (Buttons, Karten) im Vergleich zum Einzelmodus (Sprechblasen, organische Kleckse, benutzerdefinierte UI-Formen) verwendet werden sollte.

Verständnis des CSS-Outputs

Zerlegen Sie den generierten Code:

css

border-radius: 12px 12px 12px 12px;

Erklären Sie die Reihenfolge: oben-links → oben-rechts → unten-rechts → unten-links (im Uhrzeigersinn von oben-links). Beachten Sie die Kurzschreibregeln: Wenn alle vier Werte identisch sind, genügt ein einzelner Wert (border-radius: 12px).

Häufige Anwendungsfälle für CSS Border Radius

Behandeln Sie praktische reale Anwendungen:

Buttons – leichte Rundung (6–8px) verbessert die Wahrnehmung der Klickbarkeit.
Karten & Container – 12–16px ist der Industriestandard für SaaS-UIs.
Avatar- / Profilbilder – 50% oder 999px für kreisförmige Zuschnitte.
Eingabefelder – subtile Rundung (4–8px) für modernes Formular-Design.
Hero-Bereiche & Banner – asymmetrische Radien für visuelle Differenzierung.
Tooltips & Callout-Boxen – eine scharfe Ecke, die auf das auslösende Element zeigt.
Badges & Tags – Pillenform (999px) für Labels, Kategorien und Statusanzeigen.

CSS Border Radius und Browserkompatibilität

Beachten Sie, dass border-radius in allen modernen Browsern (Chrome, Firefox, Safari, Edge) ohne Herstellerpräfixe unterstützt wird. Erwähnen Sie, dass ältere Projekte, die IE8-Unterstützung benötigen, möglicherweise die Präfixe -webkit-border-radius und -moz-border-radius benötigen, obwohl diese in der aktuellen Entwicklung veraltet sind.

Tipps zur Verwendung von Border Radius im Webdesign

Verwenden Sie konsistente Radien in Ihrem Designsystem (z. B. 8px für Eingaben, 12px für Karten, 999px für Pillen).
Vermeiden Sie die Mischung zu vieler verschiedener Radien auf einer einzigen Seite – dies führt zu visueller Inkonsistenz.
Für skalierbare UIs bevorzugen Sie rem- oder em-Werte, damit sich die Ecken mit der Schriftgröße des Benutzers skalieren.
Kombinieren Sie border-radius mit overflow: hidden beim Beschneiden von Kindelementen (z. B. abgerundete Bildkarten).
Verwenden Sie große asymmetrische Werte, um "organische Klecks"-Formen zu erstellen, die in modernen Landingpage-Hero-Grafiken beliebt sind.

Häufig gestellte Fragen

Was ist ein CSS Border Radius Generator?

Ein CSS Border Radius Generator ist ein kostenloses Online-Tool, mit dem Sie die Rundung der Ecken von HTML-Elementen visuell anpassen und sofort den richtigen border-radius CSS-Code ausgeben können, wodurch manuelles Schreiben oder Raten von Werten entfällt.

Wie generiere ich einen CSS Border Radius für einen Kreis?

Stellen Sie alle vier Eckwerte auf 999px (oder 50%, wenn das Element ein perfektes Quadrat ist). Der CSS Border Radius Generator bietet dafür eine Ein-Klick-Voreinstellung.

Kann ich für jede Ecke unterschiedliche Border Radius Werte einstellen?

Ja. Deaktivieren Sie die Option "Ecken sperren" im Generator und ziehen Sie dann jeden der vier Schieberegler unabhängig voneinander, um benutzerdefinierte Werte für oben-links, oben-rechts, unten-rechts und unten-links festzulegen.

Welche Einheiten kann ich für CSS Border Radius verwenden?

Die Eigenschaft border-radius akzeptiert px, %, em, rem und vw/vh. Die gebräuchlichsten in der Praxis sind px für feste UIs und % für fluide oder kreisförmige Formen. Dieser Generator gibt px-Werte für Präzision aus.

Was ist die CSS-Kurzschreibweise für Border Radius?

Die Kurzschreibweise border-radius: O L O R U R U L setzt alle vier Ecken in Uhrzeigerrichtung, beginnend oben links. Wenn alle vier Werte gleich sind, können Sie einen einzelnen Wert schreiben: border-radius: 12px.

Ist der CSS Border Radius Generator kostenlos?

Ja, das Tool ist komplett kostenlos. Kein Konto oder Login erforderlich. Passen Sie einfach die Schieberegler an, sehen Sie sich das Ergebnis an und kopieren Sie den generierten Code.

Funktioniert Border-radius bei Bildern?

Ja. Die Anwendung von border-radius auf ein -Tag rundet seine sichtbaren Ecken ab. Um sicherzustellen, dass auch Kindinhalte (wie ein Bild in einem

) abgeschnitten werden, fügen Sie overflow: hidden zum Elterncontainer hinzu.

Was ist der Unterschied zwischen border-radius und -webkit-border-radius?

-webkit-border-radius war ein älterer Herstellerpräfix, der für Safari und Chrome erforderlich war, bevor sie die Standardeigenschaft border-radius übernahmen. Moderne Browser benötigen ihn nicht mehr, und Sie können border-radius sicher ohne Präfix verwenden.

Wie erstelle ich einen pillenförmigen Button mit CSS Border Radius?

Setzen Sie border-radius auf einen großen Wert wie 999px. Dies erzwingt voll gerundete linke und rechte Enden unabhängig von der Breite des Buttons und erzeugt die klassische Pillenform, die im modernen UI-Design verwendet wird.

Kann ich CSS Border Radius verwenden, um asymmetrische Formen zu erstellen?

Ja. Durch Einstellen unterschiedlicher Werte für jede Ecke – zum Beispiel border-radius: 999px 0 999px 0 – können Sie diagonale, wellenartige oder organische Formen erstellen. Die individuellen Eckenschieberegler des Generators erleichtern das visuelle Experimentieren, bevor der Code kopiert wird.