Border-Radius-Generator
Der CSS Border Radius Generator legt den border-radius jeder Ecke eines Elements in Prozent fest – mit einzelnen Reglern oder einem Regler für alle Ecken, plus Vorlagen wie Kreis, Blatt und Blob – und kopiert das CSS.
Über dieses Tool
Der CSS Border Radius Generator legt den border-radius jeder Ecke eines Elements in Prozent fest – mit einzelnen Reglern oder einem Regler für alle Ecken, plus Vorlagen wie Kreis, Blatt und Blob – und kopiert das CSS.
So funktioniert’s
- Ziehe die Regler für jede Ecke oder nutze „Alle Ecken“.
- Probiere eine Vorlage wie Kreis, Blatt oder Blob.
- Ändere bei Bedarf die Größe der Vorschau.
- Klicke auf „CSS kopieren“.
Gut zu wissen
- border-radius nimmt bis zu vier Werte in der Reihenfolge oben links, oben rechts, unten rechts, unten links entgegen.
- border-radius: 50% macht aus einem quadratischen Element einen Kreis.
- Radien in Prozent skalieren mit der Größe des Elements; Radien in Pixeln bleiben fest.
- Ungleiche Radien an gegenüberliegenden Ecken erzeugen Blatt- und Blob-Formen ganz ohne SVG.
- border-radius wird von allen aktuellen Browsern ohne Präfixe unterstützt.
Läuft komplett in deinem Browser – nichts, was du eingibst, wird hochgeladen oder gespeichert.
Häufige Fragen
Wie erstelle ich abgerundete Ecken in CSS?
Setze border-radius, zum Beispiel border-radius: 12px; für alle Ecken, oder vier Werte für einzelne Ecken.
Wie erstelle ich einen Kreis mit CSS?
Gib dem Element gleiche Breite und Höhe und border-radius: 50%.
In welcher Reihenfolge stehen die vier border-radius-Werte?
Oben links, oben rechts, unten rechts, unten links – im Uhrzeigersinn ab der oberen linken Ecke.
Sollte border-radius in px oder % angegeben werden?
Nutze px für einheitliche Eckengrößen bei Buttons und Karten; nutze % für Formen wie Kreise und Blobs, die mit dem Element skalieren.