Was ist CSS border-radius?

CSS border-radius rundet die Ecken des Border-Boxes eines Elements ab. Es akzeptiert ein bis vier Werte für den Radius jeder Ecke. Du kannst Kreise, Ellipsen, Pill-Formen und komplexe organische Kurven erstellen.

Unterschied zwischen border-radius Shorthand und individuellen Eckeigenschaften?

Die Shorthand akzeptiert 1-4 Werte im Uhrzeigersinn. Individuelle Eigenschaften (border-top-left-radius usw.) erlauben zwei Werte für asymmetrische elliptische Ecken.

Wie erstelle ich einen perfekten Kreis mit border-radius?

Setze border-radius auf 50% bei einem quadratischen Element. Da Prozentwerte relativ zu den Dimensionen sind, erzeugt 50% in jede Richtung eine Ellipse — einen Kreis, wenn Breite gleich Höhe.

Was sind elliptische border-radius-Werte?

border-radius kann zwei Werte pro Ecke mit Schrägstrich trennen, um horizontale und vertikale Radien unabhängig zu definieren: `border-radius: 50px / 25px`.

Beeinflusst border-radius den Klickbereich oder Overflow?

border-radius rundet nur das visuelle Aussehen ab. Um Inhalte an den Ecken zu beschneiden, füge overflow: hidden hinzu.

Wie verwende ich border-radius in einem Design-System?

Design-Systeme definieren Radius-Tokens: --radius-sm (4px), --radius-md (8px), --radius-lg (16px), --radius-full (9999px). Konsistent auf Komponenten anwenden.

Wird border-radius in allen Browsern unterstützt?

border-radius wird seit IE9 von allen modernen Browsern unterstützt. Keine Vendor-Präfixe nötig.

Border Radius
Generator

CSS-Border-Radius-Werte mit Live-Vorschau generieren. Jede Ecke einzeln steuern oder zusammen für gleichmäßige Rundung sperren.

Alle 4 EckenSperren / entsperrenCSS-ready

① Schieberegler für Radius anpassen ② Ecken sperren für gleichmäßige Abrundung ③ CSS kopieren

Voreinstellungen

Oben links: 20px

Oben rechts: 20px

Unten links: 20px

Unten rechts: 20px

Erzeugtes CSS

border-radius: 20px;

Einzelne Ecken

CSS border-radius akzeptiert bis zu 4 Werte für jede Ecke: oben-links, oben-rechts, unten-rechts, unten-links (im Uhrzeigersinn).

Kurzschreibweise

Wenn alle Ecken gleich sind, wird ein einzelner Wert ausgegeben. CSS unterstützt auch elliptische Radien mit der "/"-Syntax.

Einheiten

Border-radius akzeptiert px (absolut), % (relativ zur Elementgröße) und andere Längeneinheiten. 50% auf einem Quadrat erzeugt einen Kreis.

CSS border-radius — Ecken, Formen und Browser-Unterstützung

Die CSS-Eigenschaft border-radius rundet die Ecken eines Elements ab. Sie akzeptiert bis zu vier Werte im Uhrzeigersinn mit px, %, em oder rem. border-radius: 50% auf einem Quadrat erzeugt einen perfekten Kreis; border-radius: 9999px eine Pill-Form. Die Slash-Syntax (border-radius: 50px / 25px) definiert elliptische Ecken. Um Bilder zu beschneiden, overflow: hidden hinzufügen. In allen modernen Browsern seit CSS3 unterstützt. In Figma die Werte direkt in die Eckenradius-Felder einfügen.

Häufig gestellte Fragen

Die CSS-Eigenschaft border-radius rundet die Ecken des Border-Box eines Elements ab. Sie akzeptiert 1–4 Längenwerte (px, %, em) für jede Ecke im Uhrzeigersinn.

1 Wert: alle Ecken gleich. 2 Werte: TL/BR und TR/BL. 3 Werte: TL, TR/BL, BR. 4 Werte: TL, TR, BR, BL. Wenn alle vier gleich sind, gibt der Generator einen einzelnen Wert aus.

Pixelwerte geben absolute Eckengrößen. Prozentwerte sind relativ zu den Elementdimensionen — 50% erzeugt einen Kreis bei einem Quadrat.

Setzen Sie border-radius: 50% auf ein quadratisches Element. Für rechteckige Elemente erzeugt border-radius: 50% / 50% eine Ellipse.

Border-radius hat bei statischen Elementen minimale Auswirkungen. Das Animieren kann Repaints auslösen. Transform mit border-radius auf dem GPU-Layer ist performanter.

In Figma wird border-radius pro Ecke im Design-Panel gesetzt. In Sketch über die Eckenradius-Griffe. Beide unterstützen gemischte Eckenradien.

Border-radius funktioniert auf den meisten HTML-Elementen. Bei img ist overflow: hidden erforderlich, um das Bild zu beschneiden.

CSS border-radius — Ecken, Formen und Browser-Unterstützung

Häufig gestellte Fragen

Unser Netzwerk entdecken