CSS-Border-Radius-Generator

CSS-border-radius visuell bauen

100 % kostenlos. Läuft vollständig in deinem Browser: deine Dateien und Daten verlassen dein Gerät nie, und es wird nichts auf einen Server hochgeladen.

Ecken

12px
12px
12px
12px
border-radius: 12px;

Voreinstellungen

Jump to the next useful tool without leaving your flow.

See more

Über dieses Tool

Passe die Eckenrundung eines Elements visuell an – jede Ecke unabhängig, falls nötig – mit Live-Vorschau, und erzeugt dann die exakte CSS-border-radius-Syntax zum Kopieren, inklusive der komplexeren elliptischen Eckenwerte, die von Hand leicht falsch werden.

So verwendest du dieses Tool

  1. Basis-Radiusstil wählenStarte mit einheitlichem Radius oder dem Modus zum Bearbeiten je Ecke.
  2. Jede Ecke anpassenStimme oben links, oben rechts, unten rechts und unten links unabhängig ab.
  3. Elliptische Werte testenNutze den erweiterten Modus für organische oder blobartige Eckenformen.
  4. CSS-Ausgabe kopierenFüge die finale `border-radius`-Syntax in dein Stylesheet ein.

Kurzschreibweisen für border-radius

border-radius: 12px rundet alle vier Ecken gleich. Vier Werte gehen im Uhrzeigersinn ab oben links: 12px 12px 0 0 rundet nur oben. Ein pillenförmiger Button braucht einen Radius von mindestens der halben Höhe, etwa 9999px, und ein Kreis 50 % auf einem quadratischen Element.

Ein Schrägstrich setzt unterschiedliche horizontale und vertikale Radien und erzeugt elliptische Ecken: border-radius: 50% / 30%.

Warum es nutzen

  • Genaue Radius-Erzeugung, ohne komplexe Kurzschreibweise auswendig zu können.
  • Visuelles Feedback für Per-Ecke- und elliptische Formen.
  • Beschleunigt Komponenten-Styling und Experimente.
  • Erzeugt gültiges, produktionsfertiges CSS.

Häufige Anwendungen

  • Button-, Karten- und Input-Eckensysteme bauen.
  • Eigene Formen für moderne UI-Layouts erstellen.
  • Figma-Ecken-Specs im Frontend-Code treffen.
  • Abgerundete Avatare, Pills und Badges schnell erzeugen.

Tipps für bessere Ergebnisse

  • Halte Radiuswerte innerhalb einer Komponentenfamilie konsistent.
  • Nutze kleinere Radien für dichte UI und größere für verspieltes Design.
  • Prüfe Ecken in echter Komponentengröße, bevor du finalisierst.
  • Dokumentiere Standard-Radius-Tokens für teamweite Konsistenz.

Fehler, die du vermeiden solltest

  • Zufällige Per-Ecke-Werte nutzen, die den visuellen Rhythmus brechen.
  • Sehr große Radien auf kleine Komponenten anwenden und Clipping verursachen.
  • Ignorieren, wie Radius mit Schatten und Rändern interagiert.
  • Viele einzigartige Radiuswerte hardcoden statt Tokens zu nutzen.

Häufig gestellte Fragen

Ja – alle vier Ecken unabhängig anzupassen wird unterstützt, nicht nur ein einzelner einheitlicher Radius überall.

Ja – mit ausreichend großen Radiuswerten (oder elliptischen Eckenwerten) kannst du vollständig runde/kreisförmige Formen oder organische blobartige Umrisse erzeugen.

border-radius ist in allen modernen Browsern ohne Vendor-Prefixes gut unterstützt, das erzeugte CSS sollte also überall konsistent funktionieren.

Setz border-radius auf mindestens die halbe Höhe des Elements - 9999px ist eine gängige Abkürzung -, dann werden die Enden vollständig rund, egal wie breit der Button wird.

Werte vor dem Schrägstrich legen horizontale Radien fest, Werte danach vertikale, etwa 50% / 30%. Unterschiedliche Radien ergeben elliptische Ecken und organische Blob-Formen.

Inhalte von Kindelementen können über abgerundete Ecken hinausragen. Gib dem abgerundeten Container overflow: hidden oder setz den border-radius direkt auf das Bild.

Related guides