border-radius: 16px 16px 16px 16px;
width: 200px;
height: 200px;

KOSTENLOSER ONLINE-RADIUS-ERSTELLER FÜR GRENZEN — CSS VISUAL EDITOR

Erstellen Sie benutzerdefinierte CSS-Grenzradiuswerte visuell. Gestalten Sie abgerundete Ecken, Pillen-Schaltflächen, organische Blasen und kreative Formen mit einem Live-Vorschau- und sofortigen CSS-Ausgabe.

Was ist ein Grenzradius-Generator?

Ein Grenzradius-Generator ist ein visuelles Werkzeug, das Web-Designern hilft, CSS border-radius-Werte zu erstellen, ohne manuell Pixel- oder Prozentwerte zu berechnen. Anstatt Zahlen zu tippen und den Browser zu aktualisieren, passen Sie Schieberegler an und sehen Sie die Form in Echtzeit ändern.

Die CSS border-radius-Eigenschaft rundet die Ecken eines Elements. Es ist eine der vielseitigsten CSS-Eigenschaften — in der Lage, alles von subtilen abgerundeten Ecken bis hin zu komplexen organischen Blasenformen zu erstellen.

So verwenden Sie diesen Grenzradius-Generator

1. Wählen Sie ein Vorgabe — Beginnen Sie mit abgerundeten, Pillen-, Blasen-, Blatt-, Tropfen- oder Morph-Formen.
2. Passen Sie die Schieberegler an — Steuern Sie jede Ecke unabhängig oder verknüpfen Sie sie.
3. Legen Sie die Abmessungen fest — Ändern Sie Breite und Höhe, um den tatsächlichen Elementabmessungen zu entsprechen.
4. Personalisieren Sie Farben — Legen Sie die Boxfarbe und das Vorschauhintergrund fest.
5. Kopieren Sie den CSS-Code — Klicken Sie auf die Kopierschaltfläche und fügen Sie ihn in Ihre Stylesheet ein.

Wichtige Funktionen

Funktion	Vorteil
Individuelle Eckensteuerung	Jede Ecke unabhängig für einzigartige Formen einstellen
Verknüpfen/Entkoppeln von Ecken	Zwischen einheitlichen und benutzerdefinierten Ecken wechseln
6 Formenvorgaben	Schnelles Starten mit häufigen border-radius-Mustern
Breite & Höhe-Steuerung	An die tatsächlichen Elementabmessungen anpassen
Live-Vorschau	Siehen Sie die Form sofort aktualisieren, während Sie anpassen
In die Zwischenablage kopieren	Einfaches CSS-Exportieren mit einem Klick

Verständnis für CSS Grenzradius

Die Syntax

Die border-radius-Eigenschaft akzeptiert bis zu vier Werte, einen für jede Ecke:

border-radius: oben-links oben-rechts unten-rechts unten-links;

Wertemuster	Betroffene Ecken
16px	Alle vier Ecken gleichmäßig
16px 8px	Oben-links + unten-rechts / oben-rechts + unten-links
16px 8px 4px	Oben-links / oben-rechts + unten-links / unten-rechts
16px 8px 4px 2px	Jede Ecke individuell

Pixel vs. Prozentwerte

• Pixel (px): Fixer Grenzradius unabhängig von der Elementgröße.
• Prozentwerte (%): Relativ zur Elementgröße. 50% auf einem Quadrat erzeugt einen perfekten Kreis; 50% auf einem Rechteck erzeugt eine Ellipse.

Prozentwerte für Kreise und Pillen

Ein border-radius: 50% erzeugt einen perfekten Kreis, wenn Breite gleich Höhe ist. Für pillförmige Schaltflächen verwenden Sie einen großen Pixelwert (z. B. 999px) — dies gewährleistet, dass der Radius immer die Hälfte der kürzeren Dimension übersteigt, um vollständig gerundete Enden unabhängig von der Elementgröße zu erzeugen.

Vergleich der Formenvorgaben

Vorgabe	Werte	Anwendungsfälle
Abgerundet	16px einheitlich	Karten, Modals, Bilder
Pill	999px einheitlich	Schaltflächen, Tags, Badges
Blase	60px 40px 70px 30px	Dekorative Elemente, Hero-Bereiche
Blatt	0 100px 0 100px	Organische UI-Elemente, dekorative Trenner
Tropfen	0 100px 100px 0	Tooltips, Callouts, Zeiger
Morph	30px 70px 50px 80px	Abstrakte Formen, Hintergründe

Reale Anwendungsfälle

Schaltflächenstil

Erstellen Sie pillförmige Schaltflächen mit border-radius: 999px für einen modernen, freundlichen Look, der von den meisten Designsystemen verwendet wird.

Kartenkomponenten

Subtile Rundungen (8–16px) weichen Kartenrändern und schaffen eine visuelle Hierarchie ohne ablenkend zu wirken.

Profil-Avatare

Verwenden Sie border-radius: 50% auf quadratischen Bildern, um kreisförmige Avatare zu erstellen, die in sozialen Apps und Dashboards üblich sind.

Dekorative Blasen

Asymmetrische Radiuswerte auf großen Hintergrundelementen erzeugen trendy organische Blasenformen, die in modernem Webdesign beliebt sind.

Individuelle Tooltipps

Verwenden Sie gemischte Werte (z. B. 8px 8px 8px 0), um einen Tooltip mit einer scharfen Ecke zu erstellen, die auf das Auslöseelement zeigt.

Tipps für besseren Grenzradius

Tipp	Erklärung
Konsistenz beibehalten	Verwenden Sie denselben Radius in Ihrem Designsystem (z. B. 8px für kleine, 16px für große).
Relative Einheiten verwenden	Für responsive Kreise verwenden Sie 50% anstelle eines festen Pixelwerts.
Große Werte für Pillen	Verwenden Sie 9999px oder 999px, um sicherzustellen, dass die Enden auf jedem Element vollständig gerundet sind.
Entkoppeln für organische Formen	Asymmetrische Ecken erzeugen interessante, einzigartige Formen.
Auf den Inhalt achten	Stellen Sie sicher, dass Text und innerer Inhalt nicht durch aggressive Rundung gekappt werden.
Mit Transformationen kombinieren	Drehen oder schrägstellen Sie Elemente mit benutzerdefinierten Radien für noch kreativere Formen.

Häufig gestellte Fragen

Was passiert, wenn der Grenzradius größer als das Element ist?

Der Browser begrenzt den Wert auf die Hälfte der kürzeren Dimension. Also wird ein border-radius: 999px auf einer 60px-hohen Schaltfläche effektiv zu 30px, was eine perfekte Pillenform erzeugt.

Können Sie unterschiedliche horizontale und vertikale Radien verwenden?

Ja. Die border-radius-Kurzform unterstützt eine alternative Syntax: border-radius: 50px / 25px legt horizontale und vertikale Radien separat fest, was elliptische Ecken erzeugt. Dieser Generator konzentriert sich auf einheitliche Radien pro Ecke.

Wie erstelle ich einen Kreis?

Legen Sie border-radius: 50% auf ein quadratisches Element (gleiche Breite und Höhe) fest. Wenn das Element nicht quadratisch ist, erhalten Sie eine Ellipse.

Beeinflusst der Grenzradius das Layout?

Nein. border-radius beeinflusst nur das Layout, nicht das Layout selbst.

Wie sieht es mit dem Layout aus?

border-radius beeinflusst das Layout nicht, nur die visuelle Darstellung des Elements.

Wie sieht es mit dem Layout aus?

border-radius beeinflusst das Layout nicht, nur die visuelle Darstellung des Elements.

Wie sieht es mit dem Layout aus?

border-radius beeinflusst das Layout nicht, nur die visuelle Darstellung des Elements.