CSS Border Radius Generator
Erstellen Sie CSS-Deklarationen für abgerundete Ecken mit individuellen Werten für alle vier Ecken und wählbaren Einheiten.
Tool ausführen
Mit dem CSS Border Radius Generator erstellen Sie die passende CSS-Deklaration für abgerundete Ecken in modernen Webprojekten. Sie können für alle vier Ecken (oben links, oben rechts, unten rechts und unten links) eigene Zahlenwerte festlegen. Das Werkzeug setzt diese vier Werte in der standardisierten CSS-Reihenfolge im Uhrzeigersinn zusammen und hängt die gewählte Maßeinheit an jede einzelne Ecke an.
Standardmäßig ist für jede Ecke der Wert 10 vorgegeben, während als Einheit px voreingestellt ist. Sie können jedoch auch andere Einheiten wie rem, em oder Prozentwerte eintragen. Das Werkzeug eignet sich sowohl für gleichmäßige Rundungen an Buttons als auch für asymmetrische Karten-Designs, bei denen Sie einzelne Ecken kantig lassen möchten. Nach dem Ausführen zeigt die Ausgabe sofort die fertige CSS-Eigenschaft mit allen vier Werten an, sodass Sie den Code unmittelbar kopieren und in Ihre CSS-Dateien übernehmen können.
Anleitung
- Geben Sie die gewünschten Zahlenwerte für die vier Ecken oben links, oben rechts, unten rechts und unten links ein.
- Tragen Sie die gewünschte Maßeinheit wie px, rem oder % in das Feld für die Einheit ein.
- Starten Sie die Generierung, um die CSS-Eigenschaft border-radius zu erstellen.
- Kopieren Sie den erzeugten CSS-Code in Ihr Stylesheet.
Beispiele
- Gleichmäßige Ecken mit 15px: Alle vier Eckenfelder auf 15 und die Einheit auf px setzen erzeugt border-radius: 15px 15px 15px 15px;.
- Asymmetrische Karte: Oben links 8, oben rechts 8, unten rechts 0 und unten links 0 mit Einheit rem erzeugt border-radius: 8rem 8rem 0rem 0rem;.
FAQ
In welcher Reihenfolge werden die Ecken im CSS-Code ausgegeben?
Die Werte folgen der Standard-CSS-Kurzschreibweise im Uhrzeigersinn: oben links, oben rechts, unten rechts und danach unten links.
Welche Maßeinheiten kann ich eintragen?
Sie können gängige CSS-Einheiten wie px, rem, em, % oder vh eintragen. Das Werkzeug hängt den eingegebenen Text direkt an die Zahlenwerte an.
Was geschieht, wenn einzelne Eingabefelder leer bleiben?
Für leere Eckenfelder wird standardmäßig der Wert 10 verwendet. Bleibt das Feld für die Einheit leer, wird automatisch px angehängt.