Border-Radius-Generator
Runden Sie alle vier Ecken oder jede einzeln ab und kopieren Sie die border-radius-Zeile.
CSS
Abgerundete Ecken mit CSS erstellen
Abgerundete Ecken machen Karten, Buttons, Avatare und Bilder weicher. Diese Seite öffnet den CSS-Generator auf seinem Reiter für den Eckenradius, wo Sie alle Ecken gemeinsam abrunden oder jede einzeln formen können.
Beispiele
| CSS | Form |
|---|---|
border-radius: 8px; | Sanft abgerundete Karte oder Button |
border-radius: 50%; | Kreis bei einem Quadrat, etwa für einen Avatar |
border-radius: 999px; | Pillenförmiger Button oder Tag |
border-radius: 24px 24px 0px 0px; | Nur die oberen Ecken abgerundet, wie bei einem Bottom Sheet |
Pixel oder Prozent
Pixelwerte behalten dieselbe Rundung, egal wie groß das Element ist, was zu Buttons und Karten passt. Prozentwerte wachsen mit dem Element, und jede Ecke wird getrennt an Breite und Höhe gemessen, sodass die Rundung bei einem Rechteck elliptisch wird.
Verwandte Werkzeuge
Um dem abgerundeten Element einen Schatten zu geben, siehe den Box-Shadow-Generator. Für eine Füllung mit Farbverlauf siehe den CSS-Farbverlauf-Generator.