CSS Border Radius Generator
Eckenradien einstellen, live prüfen und den border-radius-Code übernehmen.
border-radius: 16px;
So funktioniert border-radius
Mit border-radius werden die Ecken eines Elements abgerundet. Ein Wert gilt für alle vier Ecken, vier Werte gelten der Reihe nach für oben links, oben rechts, unten rechts und unten links. Sind alle Ecken gleich, gibt das Tool die kurze Schreibweise aus.
Ein Radius von 50 Prozent macht aus einem Quadrat einen Kreis und aus einem Rechteck eine Ellipse. Für Buttons in Pillenform genügt ein sehr großer Pixelwert.
- Gleiche Radien wirken ruhig, unterschiedliche eher verspielt.
- Verschachtelte Elemente brauchen einen kleineren inneren Radius.
- Prozentwerte skalieren mit der Elementgröße.
Fragen und Antworten
Wie mache ich einen Kreis?
Ein quadratisches Element mit border-radius 50 Prozent wird zum Kreis.
Warum werden große Radien nicht größer?
Der Browser begrenzt die Radien so, dass sich gegenüberliegende Rundungen nicht überschneiden.
Kostet das Tool etwas?
Nein. Das Tool ist kostenlos und braucht weder Anmeldung noch Installation. Es gibt keine feste Grenze für die Länge der Eingabe, die Grenze setzt nur der Arbeitsspeicher deines Geräts.