CSS Border-Radius Generator

Runde Ecken visuell einstellen mit Live-Vorschau und CSS-Code zum Kopieren.

Vertikale Radien:

px
px 
{{ cssOutput }}

Was ist border-radius?

Die CSS-Eigenschaft border-radius rundet die Ecken eines Elements ab. Du kannst einen einheitlichen Radius für alle vier Ecken setzen oder jede Ecke individuell gestalten. Die Kurzschreibweise folgt der Reihenfolge: oben-links, oben-rechts, unten-rechts, unten-links.

Elliptische Border-Radien

Mit der erweiterten Syntax border-radius: H1 H2 H3 H4 / V1 V2 V3 V4 kannst du für jede Ecke einen horizontalen und vertikalen Radius definieren. So entstehen elliptische Abrundungen, die organischere Formen erzeugen.

Häufige Anwendungen

  • Kreise: border-radius: 50% auf ein quadratisches Element.
  • Pillenform: border-radius: 9999px für abgerundete Buttons.
  • Karten: border-radius: 8px bis 16px für moderne Card-Designs.
  • Blob-Formen: Unterschiedliche horizontale und vertikale Radien für organische Shapes.