Border Radius Generator
Erzeugt CSS border-radius als Shorthand und Einzelwerte für alle Ecken.
Dieses Tool ist für Mitglieder
Dieses Premium-Tool schaltest du mit einem kostenlosen Konto frei — zusammen mit allen anderen Profi-Tools und den ganzen Wissen-Artikeln.
100 % kostenlos · keine Kreditkarte · sofort freigeschaltet
Wozu dient der Border Radius Generator?
Der Border Radius Generator erzeugt CSS-Code für abgerundete Ecken, sowohl als kompaktes Shorthand als auch mit Einzelwerten pro Ecke. Ideal für Webentwickler, die Karten, Buttons oder Bilder mit der gewünschten Rundung versehen wollen.
Du gibst für jede der vier Ecken einen Radius in Pixel an: oben links, oben rechts, unten rechts und unten links. Der Generator liefert die fertige border-radius-Eigenschaft. So kannst du auch asymmetrische Formen einfach erstellen. Die Berechnung läuft vollständig in deinem Browser.
Beispiele
- Alle Ecken 8 px: ergibt border-radius: 8px, eine gleichmäßige, moderne Rundung.
- Oben 16/16 px, unten 0/0 px: border-radius: 16px 16px 0 0, ideal für eine Karten-Kopfzeile.
- Ecken 50/10/50/10 px: ergibt eine organische, blattähnliche Form.
Häufige Fragen zum Border Radius Generator
In welcher Reihenfolge stehen die Werte?
CSS-Shorthand nennt die Ecken im Uhrzeigersinn ab oben links: oben links, oben rechts, unten rechts, unten links. Genau diese Reihenfolge nutzt der Generator.
Wie erzeuge ich einen perfekten Kreis?
Bei einem quadratischen Element ergibt ein Radius von 50 Prozent einen Kreis. Du kannst den Pixelwert entsprechend durch einen Prozentwert ersetzen.
Funktioniert das auch mit Prozentwerten?
Der Generator arbeitet mit Pixeln, aber du kannst die Einheit im Ergebnis leicht durch Prozent ersetzen, etwa für reaktionsfähige Rundungen.
Werden meine Eingaben gespeichert?
Nein. Alle Berechnungen laufen ausschließlich im Browser. Es werden keine Daten gesendet oder gespeichert.
Ist das Tool kostenlos?
Ja, vollständig kostenlos und ohne Registrierung.
