Selbststarter

Border Radius Generator

CSS border-radius visuell zusammenstellen – mit Live-Vorschau, einzelnen Ecken und kompakter Code-Ausgabe.

Vorschau

CSS

border-radius: 16px;

Modus

Einheit

px

Das Wichtigste auf einen Blick

  • border-radius rundet die vier Ecken eines Elements in CSS ab.
  • Ein Wert wirkt auf alle Ecken, zwei Werte auf Diagonalen, vier Werte adressieren TL-TR-BR-BL einzeln.
  • Werte können in px, %, em, rem oder anderen Längen angegeben werden – px und % sind am häufigsten.
  • border-radius: 50% auf einem quadratischen Element ergibt einen perfekten Kreis.
  • Unser Generator gibt automatisch die kürzeste gültige Schreibweise aus und bietet eine Live-Vorschau.

Mit `border-radius` werden Ecken in CSS abgerundet – von dezent bis vollständig zur Pille oder zum Kreis. Die Eigenschaft gehört zu den meistgenutzten CSS-Werten überhaupt: Buttons, Karten, Avatare, Modals, Inputs und Bilder bekommen damit ihre charakteristische Form. Genau weil sie überall sichtbar ist, lohnt es sich, die Werte präzise zu wählen statt zu raten.

Unser Border Radius Generator nimmt dir das Rätselraten ab: Du stellst die vier Ecken per Slider oder Eingabe ein, siehst die Box live und bekommst automatisch die kürzeste gültige CSS-Schreibweise. Wechsel zwischen px und Prozent, schalte alle Ecken gleichzeitig oder behandle sie einzeln – am Ende kopierst du den fertigen Code in deine Stylesheet-Datei.

Hintergrund & Anwendungen

Was ist border-radius?

  • Definition: CSS-Eigenschaft, die jede der vier Ecken eines Elements unabhängig oder gemeinsam abrundet.
  • Werte: Ein bis vier Längenangaben in px, %, em, rem oder anderen CSS-Längen sind erlaubt.
  • Reihenfolge: Bei vier Werten gilt die Reihenfolge oben-links, oben-rechts, unten-rechts, unten-links (im Uhrzeigersinn).
  • Browser-Support: Wird seit über 15 Jahren von allen modernen Browsern ohne Präfix unterstützt.

Anwendungsfälle

  • Buttons: Leichte Abrundung (4–8px) macht Buttons freundlicher, ohne aufdringlich zu wirken.
  • Karten: Mittlere Werte (12–16px) sind im Design-System-Bereich Standard für Cards.
  • Avatare: border-radius: 50% verwandelt ein quadratisches Bild in einen runden Avatar.
  • Pillen-Buttons: border-radius: 9999px erzeugt vollständige Halbkreise an den Enden.
  • Asymmetrische Formen: Unterschiedliche Werte pro Ecke ergeben moderne, organisch wirkende Shapes.

Häufige Fehler

  • Falsche Reihenfolge: Die Vier-Wert-Form startet oben links und läuft im Uhrzeigersinn – nicht gegen.
  • Prozent-Falle: % bezieht sich auf die Box-Größe – ändert sich diese, ändert sich auch der Radius.
  • Overflow: Hohe Werte ohne overflow:hidden zeigen Inhalte über die runde Kante hinaus.
  • Kein Kreis bei Rechtecken: border-radius: 50% ergibt nur bei quadratischen Elementen einen Kreis, sonst ein Oval.
  • Doppelte Schreibweise: Einzelne Properties wie border-top-left-radius sind länger und meist unnötig.

Best Practices

  • Design-Tokens: Lege deine Radius-Werte als CSS-Variablen fest (z.B. --radius-sm, --radius-md).
  • Konsistenz: Nutze pro Komponentenklasse den gleichen Radius, um ein einheitliches Bild zu erzeugen.
  • Maßeinheit wählen: px für stabile Optik, % für skalierende Elemente, rem für barrierefreies Skalieren.
  • Performance: border-radius ist GPU-beschleunigt und hat praktisch keinen Performance-Einfluss.
  • Kombination mit overflow: Kombiniere mit overflow: hidden, damit Bilder oder Inhalte sauber abgeschnitten werden.

Die Wert-Schreibweisen verstehen

border-radius akzeptiert ein bis vier Werte – je nachdem, wie viele Ecken du gleich behandeln willst. Die Kurzformen sind nicht nur kompakter, sondern auch schneller zu lesen.

  1. 1Ein Wert: alle vier Ecken bekommen den gleichen Radius (z.B. 12px).
  2. 2Zwei Werte: erster Wert für oben-links und unten-rechts, zweiter für oben-rechts und unten-links.
  3. 3Drei Werte: oben-links, dann oben-rechts gemeinsam mit unten-links, dann unten-rechts.
  4. 4Vier Werte: alle Ecken einzeln im Uhrzeigersinn ab oben links (TL, TR, BR, BL).
  5. 5Pro Ecke sind außerdem zwei Radien möglich (mit /), für elliptische Rundungen.

Typische border-radius-Werte

Eine Übersicht gängiger Werte und wie sie wirken.

WertWirkungTypischer Einsatz
0Keine RundungScharfkantige, technische Optik
2px – 4pxSehr dezentInputs, Tabs, kleine Badges
6px – 8pxLeicht gerundetButtons, kleine Cards
12px – 16pxMittel gerundetStandard-Cards, Modals
20px – 24pxStark gerundetGroße Cards, Hero-Bereiche
50%Voll abgerundetAvatare, runde Icons (auf Quadraten)
9999pxPille / KapselTags, Pillen-Buttons
12px 0 12px 0Nur DiagonaleSpeech-Bubbles, Zier-Shapes

Häufig gestellte Fragen

Anleitung

  1. 1

    Modus wählen: alle Ecken gleich oder einzeln

    Standardmäßig steuerst du alle vier Ecken gleichzeitig. Schalte auf „einzeln“ um, wenn du asymmetrische Formen brauchst.

  2. 2

    Einheit festlegen: px oder %

    px bleibt absolut, % skaliert mit der Box. Beim Wechsel werden die Werte sinnvoll umgerechnet, damit die Optik erhalten bleibt.

  3. 3

    Mit Slidern oder Eingabefeldern feinjustieren

    Ziehe die Slider oder gib Werte direkt ein. Die Vorschau-Box aktualisiert sich live.

  4. 4

    CSS kopieren

    Der Generator wählt automatisch die kürzeste gültige Schreibweise. Mit einem Klick landet sie in der Zwischenablage.

  5. 5

    In dein Stylesheet einsetzen

    Füge den Code in deine CSS-Datei oder dein Styled-Component ein – fertig. Kombiniere bei Bedarf mit overflow: hidden.

Über Selbststarter

Selbststarter ist deine Sammlung kostenloser Online-Tools – aktuell Generatoren, bald auch Konverter und mehr. Alle Tools laufen im Browser, ohne Anmeldung, ohne Tracking.

  • #css
  • #border-radius
  • #frontend
  • #design
  • #ui