Eckenradius-Generator
CSS-border-radius-Eigenschaften erstellen
Eingabe und Optionen
Schnellvorgaben und Beispiele
Läuft in Ihrem Browser. Ihre Eingaben bleiben auf diesem Gerät.
Ergebnisse
Geben Sie Ihre Werte ein, um das Ergebnis zu sehen.
Über den Eckenradius-Generator
Unser kostenloser CSS-Eckenradius-Generator gibt Ihnen die volle visuelle Kontrolle über abgerundete Ecken für jedes HTML-Element. Stellen Sie jede Ecke einzeln ein oder verknüpfen Sie alle miteinander, wählen Sie zwischen mehreren Einheiten (px, %, em, rem) und sehen Sie das Ergebnis sofort in der Live-Vorschau.
Abgerundete Ecken gehören zum modernen Webdesign. Von dezenten 4px-Rundungen bei Karten und Eingabefeldern bis zu vollen 50%-Kreisen für Avatare: Die Eigenschaft border-radius prägt, wie Nutzer Ihre Oberfläche wahrnehmen. Mit diesem Tool finden Sie die passenden Werte mühelos, ohne Raten und ohne ständiges Neuladen des Browsers.
Der Generator enthält 10 Formvorlagen wie Quadrat, Kreis, Pille, Tropfen und Organisch sowie einen Zufallsgenerator zum kreativen Ausprobieren. Die Ausgabe erfolgt in mehreren Formaten, darunter CSS-Kurzschreibweise, einzelne Eckeneigenschaften, eine fertige CSS-Klasse und ein ungefähres Tailwind-CSS-Äquivalent.
Hauptfunktionen
- Einzelne Steuerung jeder Ecke: oben links, oben rechts, unten rechts und unten links
- Schalter zum Verknüpfen der Ecken für einen einheitlichen Radius an allen vier Ecken
- Vier Einheiten zur Auswahl: Pixel (px), Prozent (%), em und rem für responsive Designs
- Echtzeit-Vorschau mit einstellbarer Elementgröße (100-300px) und eigener Farbauswahl
- 10 Formvorlagen: Quadrat, Abgerundet, Kreis, Pille, Oben abgerundet, Unten abgerundet, Links abgerundet, Rechts abgerundet, Tropfen und Organisch
- Grafische Eckenwert-Anzeigen mit dem genauen Radius an jeder Ecke
- Zufälliger Radius-Generator für Inspiration und Experimente
- Mehrere CSS-Ausgabeformate: Kurzschreibweise, einzelne Eigenschaften, CSS-Klasse und Tailwind-CSS-Näherung
- Kopieren in die Zwischenablage mit einem Klick, zur sofortigen Verwendung in Ihren Projekten
- Schieberegler mit Bereichsanzeige für eine intuitive Werteinstellung
So verwenden Sie den Eckenradius-Generator
- Einheit wählen: Wählen Sie px für feste Größen, % für responsive Skalierung oder em/rem für schriftbezogene Größen.
- Eckenwerte anpassen: Stellen Sie mit den Schiebereglern den Radius jeder Ecke einzeln ein oder aktivieren Sie „Alle Ecken verknüpfen“ für eine gleichmäßige Rundung.
- Formvorlagen ausprobieren: Klicken Sie auf eine der 10 Formvorlagen wie Kreis, Pille oder Tropfen, um gängige Konfigurationen sofort anzuwenden.
- Ergebnis ansehen: In der Live-Vorschau mit einstellbarer Größe und Farbe sehen Sie genau, wie Ihr Eckenradius aussehen wird.
- CSS kopieren: Klicken Sie auf „Kopieren“, um den CSS-Code für border-radius zu übernehmen, oder nutzen Sie die alternativen Formate für einzelne Eigenschaften oder Tailwind-Klassen.
Anwendungsfälle
- Schaltflächen gestalten: Erstellen Sie pillenförmige Buttons, dezent abgerundete Call-to-Action-Buttons oder vollständig runde Icon-Buttons.
- Karten-Komponenten: Wenden Sie einheitlich abgerundete Ecken auf Karten, Modale und Dialogfenster in Ihrem Designsystem an.
- Avatar-Bilder: Setzen Sie 50% border-radius auf quadratische Bilder, um perfekt runde Nutzeravatare und Profilbilder zu erhalten.
- Eingabefelder: Geben Sie Formularfeldern, Textbereichen und Auswahllisten eine sanfte Rundung für einen modernen Look.
- Navigationselemente: Gestalten Sie Tabs, Badges, Tags und Navigationspunkte mit passender Eckenrundung.
- Kreative Formen: Kombinieren Sie asymmetrische Eckenwerte, um organische Blobs, Tropfen und ausgefallene Dekoelemente zu erzeugen.
- Tooltip- und Popover-Design: Wenden Sie eine präzise Eckenrundung auf Tooltips, Popovers und Dropdown-Menüs an.
- Responsive Design-Tokens: Legen Sie mit em- oder rem-Einheiten einheitliche border-radius-Werte für Ihr gesamtes Projekt fest.
Häufig gestellte Fragen
Ist dieses Tool kostenlos?
Ja, der Eckenradius-Generator ist völlig kostenlos und ohne Einschränkungen. Sie können ihn beliebig oft nutzen, ohne Registrierung oder Bezahlung.
Sind meine Daten sicher?
Auf jeden Fall. Das Tool läuft vollständig in Ihrem Browser. Es werden keine Daten an einen Server übertragen, daher bleiben Ihre Einstellungen und der erzeugte CSS-Code privat auf Ihrem Gerät.
Was ist der Unterschied zwischen px und % bei border-radius?
Pixelwerte (px) erzeugen einen festen Radius, unabhängig von der Elementgröße. Prozentwerte (%) beziehen sich auf die Abmessungen des Elements und sind daher responsiv. Zum Beispiel ergeben 50% bei einem quadratischen Element einen perfekten Kreis.
Wie erstelle ich mit CSS einen perfekten Kreis?
Setzen Sie border-radius auf 50% bei einem Element mit gleicher Breite und Höhe. Die Vorlage „Kreis“ in diesem Tool wendet genau diese Konfiguration an.
Wird border-radius in allen Browsern unterstützt?
Ja, die CSS-Eigenschaft border-radius wird in allen modernen Browsern vollständig unterstützt, darunter Chrome, Firefox, Safari, Edge und Opera. Herstellerpräfixe sind nicht nötig.
Tipps und bewährte Vorgehensweisen
- Einheitliche Werte verwenden: Legen Sie in Ihrem Designsystem 2-3 Standardwerte für border-radius fest (z. B. 4px, 8px, 16px), damit das Erscheinungsbild einheitlich bleibt.
- Prozentwerte für Kreise nutzen: Setzen Sie bei quadratischen Elementen 50% für perfekte Kreise, die sich bei Größenänderungen automatisch anpassen.
- Bei Formularen dezent bleiben: Kleine Werte (2-8px) eignen sich am besten für Eingabefelder und Formularelemente und halten den Look sauber und professionell.
- Asymmetrische Ecken ausprobieren: Unterschiedliche Werte an jeder Ecke ergeben einzigartige Formen, die Dekoelementen Charakter verleihen können.
- Responsive Einheiten in Betracht ziehen: Verwenden Sie em oder rem für border-radius-Werte, die proportional zur Schrift skalieren.
- Mit Inhalt testen: Prüfen Sie immer, wie die abgerundeten Ecken mit echtem Inhalt im Element aussehen, besonders bei unterschiedlichen Viewport-Größen.