Zum Inhalt springen

CSS-Border-Radius-Generator

Erstelle CSS border-radius-Werte visuell. Passe einzelne Ecken an, verknüpfe sie oder erstelle elliptische Formen. Kopiere den CSS-Code. Kostenlos, 100% in deinem Browser.

Vorschau

12px
12px
12px
12px
Einheit

CSS-Ausgabe

 

Was ist border-radius?

Die CSS-Eigenschaft border-radius rundet die Ecken eines Elements ab. Sie akzeptiert Werte in px, %, em und anderen Einheiten. Ein Wert von 50% erzeugt einen perfekten Kreis bei quadratischen Elementen.

Syntax

Ein Wert — gilt für alle vier Ecken. Zwei Werte — oben-links/unten-rechts und oben-rechts/unten-links. Vier Werte — oben-links, oben-rechts, unten-rechts, unten-links (im Uhrzeigersinn).

Elliptische Ecken

Mit der Syntax border-radius: 50px / 25px können horizontale und vertikale Radien getrennt definiert werden, um elliptische Formen zu erstellen. Der Wert vor dem Schrägstrich definiert die horizontale, der danach die vertikale Krümmung.

Datenschutz

Alle Verarbeitung läuft 100% in deinem Browser. Es werden keine Daten an Server gesendet.