Border-Radius-Generator

Zieh die Regler, um jede Ecke der Vorschaubox abzurunden, und kopiere den erzeugten border-radius-Code. Sperre alle vier Ecken zusammen für ein einfaches abgerundetes Rechteck, oder entsperre sie für Pillenformen, Blattformen und asymmetrische Blobs.

Was ist dieses Tool?

border-radius ist die CSS-Eigenschaft, die die Ecken eines Elements abrundet. Von Hand geschrieben benötigt sie vier Werte in fester Reihenfolge — oben links, oben rechts, unten rechts, unten links —, eine Reihenfolge, die man leicht durcheinanderbringt, besonders wenn die vier Ecken unterschiedlich sind.

Dieses Tool nimmt dir das Rätselraten ab: Bewege einen Regler, sieh zu, wie sich die Ecke in der Live-Vorschau abrundet, und lies den exakten CSS-Code aus der generierten Code-Box ab. Ein einziger Sperr-Schalter wechselt zwischen einheitlichem Radius (alle vier Ecken gleich, der häufigste Fall) und vier unabhängigen Reglern für organische, asymmetrische Formen.

Warum sollte man es nutzen?

Die Vorschau aktualisiert sich sofort beim Ziehen — kein CSS bearbeiten und neu laden, um das Ergebnis zu sehen.
Ein-Klick-Sperre für den häufigen Fall 'gleicher Radius auf jeder Ecke'; entsperren für Pillen-Buttons, Sprechblasen und Blob-Formen.
Erzeugt die abgekürzte Einzelwert-Form, wenn alle Ecken übereinstimmen, oder die volle Vier-Werte-Form, wenn nicht — in beiden Fällen direkt copy-paste-fertig.
Läuft komplett in deinem Browser. Nichts, was du eingibst, wird irgendwohin gesendet.
Kostenlos, keine Anmeldung, funktioniert auf dem Handy.

Anleitung

Lass 'Alle 4 Ecken sperren' angehakt und zieh einen beliebigen Regler, um einen einheitlichen Radius für die ganze Box festzulegen.
Entferne den Haken, um jede Ecke unabhängig zu steuern — nützlich für Pillenformen, Tropfen und asymmetrische Karten.
Beobachte, wie sich die Vorschaubox live aktualisiert, während du jeden Regler anpasst.
Kopiere den generierten CSS-Code aus der Code-Box und füge ihn in dein Stylesheet ein.

Beispiel

Eingabe

Oben links: 40px, Oben rechts: 8px, Unten rechts: 40px, Unten links: 8px

Ausgabe

border-radius: 40px 8px 40px 8px;

Ungleiche gegenüberliegende Ecken wie diese erzeugen eine Blatt- oder Blütenblatt-Silhouette — ein häufiger Effekt bei Karten- und Badge-Design.

px oder % — welche Einheit sollte ich verwenden?

Dieser Generator erzeugt Pixelwerte, was für die meisten UI-Arbeiten die richtige Standardwahl ist: Buttons, Karten und Eingabefelder, bei denen du einen festen, vorhersehbaren Eckenradius unabhängig von der Elementgröße willst.

Prozentwerte verhalten sich anders — sie sind relativ zur eigenen Breite und Höhe des Elements, sodass ein 50%-Radius auf einem quadratischen Element einen perfekten Kreis ergibt, auf einem nicht-quadratischen Element hingegen eine Ellipse. Wenn du diesen Effekt willst (Avatare, Blob-Formen, die mit dem Container skalieren), nimm den generierten CSS-Code und tausche die px-Werte von Hand gegen einen %-Wert — zum Beispiel verwandelt border-radius: 50% jede quadratische Box in einen Kreis.

Häufige border-radius-Muster

Abgerundete Karte: alle Ecken gleich, etwa 8–16px für UI-Komponenten.
Pillen-Button: den Radius auf die Hälfte der Elementhöhe setzen (oder einfach 9999px verwenden, das unabhängig von der Höhe zu einer vollständigen Pille klemmt).
Kreisförmiger Avatar: border-radius: 50% auf einem quadratischen Element (gleiche Breite und Höhe).
Sprechblase: drei Ecken abgerundet, eine Ecke eckig — drei Regler hoch setzen und einen auf 0.
Blatt-/Blütenblattform: gegenüberliegende Ecken gleich, benachbarte Ecken unterschiedlich — z. B. oben links und unten rechts beide groß, oben rechts und unten links beide klein.

Kombination mit einem Schatten

Abgerundete Ecken kommen selten allein — Karten und Buttons brauchen meist auch etwas Schatten für Tiefe. Nutze den Box-Shadow-Generator, um einen Schlagschatten einzustellen, und wende beide generierten CSS-Teile auf dasselbe Element an.

→ Box-Shadow-Generator · Einheitenumrechner

Häufig gestellte Fragen

Wie ist die Reihenfolge der Ecken bei border-radius?

Die CSS-Kurzform folgt immer der Reihenfolge oben links, oben rechts, unten rechts, unten links, im Uhrzeigersinn beginnend oben links. Die vier Regler dieses Tools sind entsprechend beschriftet, sodass du dir die Reihenfolge nie selbst merken musst.

Kann ich für jede Ecke unterschiedliche Einheiten verwenden?

Ja, in echtem CSS kannst du px, %, em und rem zwischen den Ecken mischen, auch wenn das in der Praxis selten vorkommt. Dieses Tool erzeugt der Einfachheit halber einheitliche px-Werte — ändere bei Bedarf einen einzelnen Wert direkt in deinem Stylesheet auf % oder eine andere Einheit.

Warum ergibt border-radius: 50% manchmal ein Oval statt eines Kreises?

Weil Prozentwerte für jede Achse unabhängig berechnet werden — der horizontale Radius ist ein Prozentsatz der Elementbreite, der vertikale Radius ein Prozentsatz der Höhe. Bei einem quadratischen Element (gleiche Breite und Höhe) ergibt das einen perfekten Kreis, bei einem Rechteck eine Ellipse.

Wirkt sich border-radius auch auf Hintergrundbilder und Rahmen aus?

Ja — border-radius beschneidet den Hintergrund, den Rahmen und (in modernen Browsern) den box-shadow des Elements auf die abgerundete Form. Es schneidet keinen überlaufenden Kindinhalt ab, es sei denn, du setzt zusätzlich overflow: hidden auf das übergeordnete Element.

Gibt es eine Obergrenze für die Größe des Radius?

Keine feste Obergrenze — überschreitet der Radius die Hälfte der Element-Breite oder -Höhe, begrenzen Browser ihn so, dass sich die beiden Kurven auf dieser Seite genau in der Mitte treffen — so wird aus einem Quadrat ein perfekter Kreis oder eine Pillenform.