CSS-Border-Radius-Generator — Kostenloses Online-Tool

Was ist CSS-Border-Radius-Generator?

Kostenloser Online-CSS-Border-Radius-Generator. Passen Sie die Rundungsradien der vier Ecken mit visuellen Steuerelementen an.

Die CSS-Eigenschaft border-radius steuert die Rundung von Elementecken, und ihre Vielseitigkeit reicht weit über einfache abgerundete Rechtecke hinaus. Durch die unabhängige Anpassung jeder Ecke können Sie Pillen, Kreise, asymmetrische Formen und komplexe organisch wirkende Formen erstellen – alles mit einer einzigen CSS-Eigenschaft. CSS Border Radius Generator bietet eine individuelle Reglersteuerung für alle vier Ecken mit einer Live-Vorschau, die sich sofort aktualisiert.

Jede Ecke – oben links, oben rechts, unten rechts, unten links – hat ihren eigenen Regler, sodass Sie vollständig asymmetrische Formen erstellen können. Die Umschaltung der Einheit zwischen Pixeln (px) und Prozent (%) ändert das Verhalten erheblich. Pixelwerte erzeugen Ecken mit festem Radius, die unabhängig von den Elementabmessungen dieselbe Größe behalten. Prozentwerte binden den Radius an die Elementgröße – auf diese Weise erstellen Sie perfekte Kreise (border-radius: 50% auf einem Quadrat).

Vier Voreinstellungen decken die häufigsten Anwendungsfälle ab. Circle erstellt border-radius: 50% für einen perfekten Kreis (oder eine Ellipse bei nicht quadratischen Elementen). Pill erstellt eine Form mit vollständig gerundeten Enden (border-radius: 9999px), nützlich für Button-Badges und Tags. Card wendet eine dezente Rundung von 8px an, die sich für Kartenkomponenten und Container eignet. Rounded wendet eine 8px-Rundung auf alle Ecken an, geeignet für Buttons und Formulareingaben.

Der generierte CSS-Code zeigt die Kurzschreibweise. Wenn alle vier Ecken denselben Wert haben, wird ein einzelner Wert ausgegeben (z. B. border-radius: 8px). Wenn sich die Ecken unterscheiden, wird die Vier-Werte-Syntax im Uhrzeigersinn ausgegeben (oben links, oben rechts, unten rechts, unten links). Der Code ist kopierfertig für Ihr Stylesheet.

Anwendungsbeispiele für CSS-Border-Radius-Generator

Einen abgerundeten Button mit Pillenform erstellen

Ihr Designsystem verwendet pillenförmige Buttons mit 24px Höhe und vollständig gerundeten Enden. Wählen Sie die Voreinstellung „Pill“ für border-radius: 9999px. Die Button-Vorschau zeigt die Pillenform. Kopieren Sie das CSS und wenden Sie es auf Ihre Button-Komponente an. Passen Sie die Eckwerte einzeln an, wenn Sie einen weicheren Look wünschen.

Eine asymmetrische Form für einen Hero-Bereich gestalten

Ein Hero-Bereich einer Landingpage benötigt eine unverwechselbare Form: oben links 0px, oben rechts 40px, unten rechts 0px, unten links 40px. Stellen Sie jeden Eckenregler unabhängig ein. Die Vorschau zeigt eine einzigartige asymmetrische Form. Das generierte CSS lautet border-radius: 0 40px 0 40px.

Einen kreisförmigen Avatar mit prozentualem Radius erstellen

Ein Benutzer-Avatar ist ein quadratisches Bild mit 64x64 Pixeln. Schalten Sie die Einheit auf % um und setzen Sie alle vier Ecken auf 50 %. Die Vorschau zeigt einen perfekten Kreis. Das generierte CSS lautet border-radius: 50%, das auf jedem quadratischen Element unabhängig von der Größe funktioniert.

Warum CSS-Border-Radius-Generator verwenden?

Individuelle Steuerung aller 4 Ecken
Umschaltung zwischen px und %
Live-Vorschau-Box
4 Voreinstellungen: Kreis, Pille, Karte, Abgerundet

So verwendest du CSS-Border-Radius-Generator — Schritt für Schritt

Passen Sie die Schieberegler für jede Ecke an (oben-links, oben-rechts, unten-rechts, unten-links).

Wechseln Sie zwischen px- und %-Einheiten.

Sehen Sie die Live-Vorschau des Rahmenradius.

Kopieren Sie den CSS-Code.

Für wen ist CSS-Border-Radius-Generator geeignet?

UI-Design
Schaltflächengestaltung
Kartendesign
Webentwicklung

Profi-Tipps für CSS-Border-Radius-Generator

1Verwenden Sie Pixelwerte für Elemente mit fester Größe (Buttons, Karten), bei denen der Eckenradius konstant bleiben soll. Verwenden Sie Prozentwerte für responsive Elemente, bei denen der Radius mit dem Element skalieren soll.
2Die Voreinstellung „Pill“ verwendet einen sehr großen Pixelwert (9999px) statt 50 %, weil 50 % auf einem Rechteck eine Ellipse und keine Pille erzeugt. Der große Pixelwert gewährleistet vollständig gerundete Enden auf jedem rechteckigen Element.
3Für ein „Squircle“ (Quadrat mit leicht abgerundeten Ecken, beliebt bei iOS) verwenden Sie ungefähr 10-12 % border-radius auf allen Ecken. Dies erzeugt einen weicheren Look als kleine Pixelwerte.
4Bei Prozentwerten wird der Radius relativ zur Breite des Elements (für links/rechts) und zur Höhe (für oben/unten) berechnet. Unterschiedliche Prozentsätze bei horizontalen vs. vertikalen Ecken erzeugen elliptische Ecken.

CSS-Border-Radius-Generator — Häufig gestellte Fragen

What is border-radius in CSS?

border-radius rounds the corners of an element. It accepts 1-4 values for each corner. For example, border-radius: 10px 20px 30px 40px sets top-left, top-right, bottom-right, and bottom-left respectively.

How to make a circle with CSS?

Set border-radius: 50% on a square element (equal width and height). This creates a perfect circle.

Will the generated CSS work in all browsers?

The CSS generators produce W3C-standard code that works in Chrome, Firefox, Safari, and Edge. Vendor prefixes are included where needed for older browser versions.

Can I copy the generated code directly?

Yes. Each generator provides a copy button that places the code on your clipboard. The code is ready to paste into your project — no cleanup or modification needed.

Is CSS-Border-Radius-Generator really free to use?

Yes, CSS-Border-Radius-Generator is completely free with no hidden charges, no usage limits, and no premium tiers. You can use it as often as you need without signing up or providing any personal information.

Bereit, CSS-Border-Radius-Generator zu nutzen?

Kostenloses Online-Werkzeug — funktioniert im Browser, keine Anmeldung erforderlich. Starte noch jetzt.

Jetzt ausprobieren