Wie unterscheidet sich border-radius von clip-path?

border-radius rundet nur die vier Ecken einer rechteckigen Box und respektiert Hintergrund, Border und Outline. clip-path schneidet beliebige Polygone oder Kurven aus und ignoriert die Border. Für reine Rundungen ist border-radius performanter und barrierefreundlicher (Outlines folgen mit).

Warum bleiben Bilder eckig trotz border-radius?

Wenn das Bild ein img -Element ist, muss border-radius direkt auf dem Bild oder seinem Container mit overflow: hidden stehen. Bei background-image reicht border-radius auf dem Container.

Was ist der Unterschied zwischen 50% und 9999px?

50% rundet relativ zur Box — eine 200x100-Box wird zur Ellipse, eine quadratische zum Kreis. 9999px ist absolut und wird intern auf 50 % der kürzeren Seite geclamped — bei rechteckigen Boxen entsteht ein Pill, bei quadratischen ebenfalls ein Kreis. 9999px ist robuster, wenn sich die Box-Maße ändern.

Funktioniert border-radius bei Tabellen?

Auf table ja, aber die internen td / th ignorieren es bei border-collapse: collapse . Setze border-collapse: separate; border-spacing: 0; oder runde Container statt der Tabelle selbst.

Kann ich border-radius animieren?

Ja, border-radius ist animierbar. transition: border-radius 200ms ease; funktioniert für Hover-Effekte. Für komplexe Blob-Morphs zwischen verschiedenen %-Werten reicht eine einfache Keyframe-Animation; CSS interpoliert Längen direkt.

Welcher Radius passt zu Dark Mode?

Dark Mode profitiert oft von etwas größeren Radien (12–20 px), weil dunkle Flächen mit weichen Ecken den AMOLED-Look unterstützen. Bei Light Mode wirken kleinere Radien (4–12 px) seriöser. Bleib aber innerhalb deines Token-Sets, statt zwischen Modi zu wechseln.

Startseite
CSS Tools
CSS Border-Radius Generator

CSS Border-Radius Generator

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

Alle Ecken verknüpfen

{{ corner.label }} {{ corner.value }}px

Elliptische Ecken (horizontal / vertikal)

Vertikale Radien:

{{ corner.label }} (V) {{ corner.value }}px

Box-Breite

Box-Höhe

Hintergrund

Rand

CSS Code

{{ cssOutput }}

Presets

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.

border-radius: die volle Spezifikation

Die border-radius-Property ist im CSS Backgrounds and Borders Module Level 3 definiert und akzeptiert eine bis vier Längenangaben sowie optional einen zweiten Satz nach Slash. Die Kurzform border-radius: 8px; ist gleichwertig zu border-radius: 8px 8px 8px 8px; und gilt im Uhrzeigersinn ab Top-Left. Werte können in px, %, em, rem oder vw kommen — Prozentwerte beziehen sich auf Breite (horizontal) bzw. Höhe (vertikal) der Box. Negative Werte sind ungültig und werden auf 0 geclamped.

Elliptische Ecken brauchen die Slash-Syntax: border-radius: 50px 20px / 30px 10px; bedeutet horizontaler Radius 50 px für TL/BR und 20 px für TR/BL, vertikaler Radius 30 px für TL/BR und 10 px für TR/BL. Diese Schreibweise stammt aus der SVG-Welt, in der jede Ecke eine eigene Ellipsen-Halbachse trägt. So entstehen tropfen- oder blob-artige Formen ohne SVG, rein in CSS — perfekt für Hero-Sections und Onboarding-Illustrationen.

border-radius interagiert mit anderen Properties: Die Outline wird im modernen Chromium und Firefox der Ecken-Rundung folgen (älter abgehackt). overflow: hidden ist Pflicht, wenn Kindelemente die Rundung respektieren sollen — sonst stechen Bilder oder Hintergründe heraus. Bei sehr großen Werten (>= 50 % der kürzeren Seite) entsteht ein Pill bzw. Kreis. Browser akzeptieren auch border-radius: 9999px als gängiges Idiom für Pills, weil der Wert intern auf die maximal sinnvolle Größe geclamped wird.

So nutzt du den Generator effektiv

Ein paar Tricks helfen, in 30 Sekunden vom Designkonzept zum produktiven CSS-Snippet zu kommen.

Aktiviere zuerst Link Corners und finde dein Basis-Radius. 8 px wirkt seriös (Banken), 16 px modern (SaaS), 24 px verspielt (Konsumenten-Apps). Dein gesamtes Designsystem sollte zwei bis drei abgestufte Werte nutzen, nicht mehr.
Schalte das Linking aus, wenn du asymmetrische Effekte brauchst — z. B. nur die oberen Ecken einer Bottom-Sheet oder ein Speech-Bubble-Eck.
Probiere die elliptischen Radien für Hero-Bilder. Eine Kombination wie border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; erzeugt eine organische Blob-Form, die in Marketing-Designs populär ist.
Nutze die Presets als Sprungbrett — Uniform 8 ist Bootstrap-Standard, Uniform 16 entspricht Material 3, Circle/Pill ist 200 px (oder größer als die Boxhälfte). Klick und passe an.
Kopiere das Snippet und ersetze feste Pixelwerte durch Custom Properties wie var(--radius-md). So bleibt dein Designsystem konsistent.

Konkrete border-radius-Beispiele

Diese Snippets decken die wichtigsten UI-Patterns ab.

Card: border-radius: 12px; ist die saubere Default-Wahl für Bootstrap-/Material-Karten.
Pill-Button: border-radius: 9999px; rundet vollständig — perfekt für CTAs und Tag-Chips.
Avatar-Kreis: width: 48px; height: 48px; border-radius: 50%; — nur bei quadratischer Box ergibt 50 % einen exakten Kreis.
Speech-Bubble: border-radius: 16px 16px 16px 0; erzeugt eine abgerundete Sprechblase, die unten links spitz zuläuft.
Organische Blob: border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; — beliebt in modernen Hero-Sections und Decorative-Elements.

Grenzen und Performance

border-radius selbst ist im modernen Browser GPU-beschleunigt und kostet praktisch keine Render-Zeit. Anders sieht es aus, wenn du gerundete Ecken mit overflow: hidden kombinierst und darin animierte Inhalte oder Filter-Effekte hast — der Compositor muss dann eine Maske anwenden, was auf älteren Mobilgeräten Frame-Drops verursachen kann. Vermeide außerdem border-radius auf position: fixed-Elementen kombiniert mit backdrop-filter: blur(); das ist auf Safari häufig glitchy. Beim Drucken ignorieren manche Browser-Print-Stylesheets border-radius — wenn dein Layout gedruckt werden soll, teste das gezielt. Sehr kleine Radien (1–2 px) werden auf High-DPI-Displays oft unscharf, weil Anti-Aliasing nicht genug Pixel zur Verfügung hat — entweder ganz weglassen oder mindestens 4 px verwenden. Schließlich: WCAG verlangt keine bestimmten Radien, aber stark abgerundete Buttons müssen weiterhin ein klares Klick-Ziel (mind. 24x24 CSS-Pixel) bieten.

Häufige Fragen zu border-radius

Wie unterscheidet sich border-radius von clip-path?: border-radius rundet nur die vier Ecken einer rechteckigen Box und respektiert Hintergrund, Border und Outline. clip-path schneidet beliebige Polygone oder Kurven aus und ignoriert die Border. Für reine Rundungen ist border-radius performanter und barrierefreundlicher (Outlines folgen mit).
Warum bleiben Bilder eckig trotz border-radius?: Wenn das Bild ein img-Element ist, muss border-radius direkt auf dem Bild oder seinem Container mit overflow: hidden stehen. Bei background-image reicht border-radius auf dem Container.
Was ist der Unterschied zwischen 50% und 9999px?: 50% rundet relativ zur Box — eine 200x100-Box wird zur Ellipse, eine quadratische zum Kreis. 9999px ist absolut und wird intern auf 50 % der kürzeren Seite geclamped — bei rechteckigen Boxen entsteht ein Pill, bei quadratischen ebenfalls ein Kreis. 9999px ist robuster, wenn sich die Box-Maße ändern.
Funktioniert border-radius bei Tabellen?: Auf table ja, aber die internen td/th ignorieren es bei border-collapse: collapse. Setze border-collapse: separate; border-spacing: 0; oder runde Container statt der Tabelle selbst.
Kann ich border-radius animieren?: Ja, border-radius ist animierbar. transition: border-radius 200ms ease; funktioniert für Hover-Effekte. Für komplexe Blob-Morphs zwischen verschiedenen %-Werten reicht eine einfache Keyframe-Animation; CSS interpoliert Längen direkt.
Welcher Radius passt zu Dark Mode?: Dark Mode profitiert oft von etwas größeren Radien (12–20 px), weil dunkle Flächen mit weichen Ecken den AMOLED-Look unterstützen. Bei Light Mode wirken kleinere Radien (4–12 px) seriöser. Bleib aber innerhalb deines Token-Sets, statt zwischen Modi zu wechseln.