Die Ergebnisse dienen nur zu Informationszwecken und können Fehler enthalten. Bitte überprüfen Sie wichtige Informationen unabhängig. Die Nutzung dieses Tools erfolgt auf eigene Gefahr.
Was dieses Tool macht
Mit dem Border-Radius-Generator runden Sie jede Ecke einer Box einzeln über vier Schieberegler ab, von 0 bis 100 Pixel, und sehen die Form sofort in einer Live-Vorschau. Die Ausgabe ist eine einzelne border-radius-Deklaration, die Sie direkt in Ihr Stylesheet einfügen können. Alle vier Ecken starten mit 20px.
Die Werte stehen in der Reihenfolge, die CSS erwartet: oben links, oben rechts, unten rechts, unten links – also im Uhrzeigersinn, beginnend oben links. Gleiche Werte ergeben eine gleichmäßig abgerundete Karte; unterschiedliche Werte ergeben Sprechblasen, Tabs, Blattformen und andere asymmetrische Designs. Die Kurzschreibweise funktioniert in allen aktuellen Browsern ohne Präfixe.
Wann Sie es verwenden
- Sie gestalten Karten, Buttons und Eingabefelder passend zum Eckenradius eines Designsystems.
- Sie runden nur die oberen Ecken eines Tabs oder die unteren Ecken eines Dropdowns ab.
- Sie erstellen eine Chat-Sprechblase mit einer spitzen Ecke.
- Sie probieren schnell verschiedene Radien aus, statt das CSS zu bearbeiten und die Seite neu zu laden.
Beispiel
Eingabe
Oben links 24, oben rechts 24, unten rechts 4, unten links 24Ausgabe
border-radius: 24px 24px 4px 24px;Fragen zu diesem Tool
Wie erstelle ich einen perfekten Kreis?
Geben Sie einem quadratischen Element border-radius: 50%. Ein Prozentwert bezieht sich auf die Größe des Elements, daher bleibt es bei jeder Breite rund. Ein pillenförmiger Button verwendet stattdessen einen großen Pixelwert wie 999px.
Warum ragt der Hintergrund über die abgerundeten Ecken hinaus?
Kindelemente mit eigenem Hintergrund können über die Ecken gezeichnet werden. Setzen Sie overflow: hidden auf das abgerundete Elternelement, oder geben Sie dem Kindelement denselben Radius.
Kann eine Ecke elliptisch sein?
Ja. CSS akzeptiert zwei Radien pro Ecke, getrennt durch einen Schrägstrich, etwa border-radius: 50px / 25px. Der Generator schreibt die übliche kreisförmige Variante; ergänzen Sie den zweiten Wert bei Bedarf in der Ausgabe.
Wirkt sich border-radius auch auf den Schatten aus?
Ja. Ein box-shadow folgt der abgerundeten Kontur, sodass die Ecken übereinstimmen. Erstellen Sie den Schatten mit dem Box-Shadow-Generator und kombinieren Sie beide Deklarationen.
Ist dieses Tool kostenlos?
Ja, es ist kostenlos. Ohne Anmeldung und ohne E-Mail. Ergebnisse direkt auf dieser Seite.
Wie erhalte ich mein Ergebnis?
Nutze das Tool auf dieser Seite. Das Ergebnis erscheint hier und wird nicht per E-Mail zugestellt.