toolsmoah

Border-Radius-Generator

Erstellen und Vorschau von CSS-Border-Radius-Eigenschaften visuell.

Generiertes CSS
Passen Sie die Rundung jeder Ecke an
Vorschau
Vorschau des generierten Border-Radius-Effekts
Vorschau
Generiertes CSS
border-radius: 20px;
Beispiele
Klicken Sie auf vordefinierte Border-Radius-Stile, um sie anzuwenden
Border-Radius-Eigenschaften

Eigenschaftsreihenfolge

Die Eigenschaft border-radius wird im Uhrzeigersinn angewendet: oben links → oben rechts → unten rechts → unten links

Kurzschreibweisen

  • • border-radius: 10px; - Gilt für alle vier Ecken
  • • border-radius: 10px 20px; - Erster Wert gilt für oben links und unten rechts, zweiter für oben rechts und unten links
  • • border-radius: 10px 20px 30px; - Erster Wert gilt für oben links, zweiter für oben rechts und unten links, dritter für unten rechts
  • • border-radius: 10px 20px 30px 40px; - Gilt für oben links, oben rechts, unten rechts und unten links in dieser Reihenfolge

Verwendungstipps

  • • Verwenden Sie 50 %, um einen perfekten Kreis zu erstellen
  • • 4-8px ist normalerweise gut für Schaltflächen
  • • 8-16px ist üblich für Karten und Panels
  • • Asymmetrischer Radius kann einzigartige Designeffekte erzeugen
    Border-Radius-Generator | toolsmoah