6XC

CSS Border-Radius-Generator

Runden Sie jede Ecke einzeln oder alle zusammen, in px oder %, mit Live-Vorschau und kopierbarem CSS.

965 Aufrufe

Einheit

Die border-radius-Eigenschaft

Die Kurzschreibweise folgt der Reihenfolge border-radius: oben-links oben-rechts unten-rechts unten-links. Pixel ergeben eine feste Rundung; Prozentwerte skalieren mit der Box — 50% bei einem Quadrat ergibt einen perfekten Kreis. Ungleichmäßige Werte erzeugen organische „Blob"-Formen, die in modernen Hero-Bereichen beliebt sind.

Häufig gestellte Fragen

Wie erstelle ich einen Kreis oder eine Pille?

Ein quadratisches Element mit border-radius: 50% wird zu einem Kreis. Ein Rechteck mit einem großen festen Radius (z. B. 999px) wird zu einer Pille.

px oder % — was soll ich verwenden?

Verwenden Sie px, wenn die Ecken bei allen Größen identisch aussehen müssen (Karten, Buttons). Verwenden Sie %, wenn die Rundung mit dem Element skalieren soll, wie bei Kreisen und Blobs.

Ähnliche Tools

CSS-Farbverlauf-Generator Gestalten Sie lineare, radiale und konische CSS-Farbverläufe mit Live-Vorschau und kopieren Sie den Code. Erstellen CSS-Box-Shadow-Generator Gestalten Sie einen box-shadow visuell — Versatz, Unschärfe, Ausdehnung, Farbe, Deckkraft und Inset — mit Live-Vorschau. Erstellen CSS Text-Schatten-Generator Gestalten Sie einen text-shadow mit Versatz, Unschärfe, Farbe und Deckkraft — Live-Vorschau an Beispieltext. Erstellen CSS-Glasmorphismus-Generator Gestalten Sie einen Glaseffekt (Glasmorphismus) mit Live-Vorschau — passen Sie Unschärfe, Transparenz, Farbton und Rahmen an und kopieren Sie das CSS. Erstellen