Border-Radius-Generator

Der Border-Radius-Generator baut CSS-border-radius-Werte von Hand — Sie ziehen Eckregler, wechseln zwischen Kreisen und Ellipsen und kopieren eine Deklaration, die bereits auf ihre kürzeste gültige Form reduziert ist. Er ist für Frontend-Entwickler und Designer gedacht, die eine Form genau so in der Vorschau sehen wollen, wie der Browser sie zeichnet, ohne CSS in einem separaten Tab zu bearbeiten.

Wie sich die beiden Modi unterscheiden

Der einfache Modus bearbeitet einen Radius pro Ecke: oben links, oben rechts, unten rechts, unten links. Das reicht für abgerundete Karten, Schaltflächen und Avatare, bei denen jede Ecke ein Viertelkreis ist.

Der Ellipsenmodus ergänzt einen zweiten, unabhängigen vertikalen Radius für jede Ecke. Statt eines Viertelkreises wird eine Ecke zu einer Viertelellipse, so entstehen squircle-artige Karten, Eiformen und organische Blobs. Die elliptische Ausgabe nutzt die Slash-Syntax, bei der die vier horizontalen Radien zuerst kommen und die vier vertikalen folgen: border-radius: 40px 40px 40px 40px / 60px 60px 60px 60px.

Ein Kontrollkästchen „Ecken verknüpfen“ verbindet alle vier Ecken. Mit Verknüpfung bewegt ein Regler die übrigen mit; schalten Sie sie aus, um eine einzelne Ecke zu formen. Das Kontrollkästchen steuert im Ellipsenmodus auch die vertikalen Radien.

Wie die Kurzschrift-Kürzung funktioniert

CSS erlaubt es, Radiuswerte wegzulassen, sobald sie sich wiederholen. Der Generator wendet dieselbe Kürzung an, die ein Browser nutzt, in dieser Reihenfolge:

1. Entspricht unten links dem oben rechts, wird unten links weggelassen.
2. Bleiben drei Werte und entspricht unten rechts dem oben links, wird unten rechts weggelassen.
3. Bleiben zwei Werte und entspricht oben rechts dem oben links, wird oben rechts weggelassen.

Die Zuordnung lohnt sich zum Einprägen. Ein Wert setzt alle vier Ecken. Zwei Werte setzen zuerst oben links/unten rechts, dann oben rechts/unten links. Drei Werte setzen oben links, dann oben rechts/unten links, dann unten rechts.

Radien (OL, OR, UR, UL)	Generierter Wert
16, 16, 16, 16	16px
20, 40, 20, 40	20px 40px
10, 30, 10, 30	10px 30px
10, 30, 50, 30	10px 30px 50px

Die dritte Zeile ist eine nützliche Falle: 10px 30px 50px bedeutet oben links 10, oben rechts 30, unten rechts 50 und unten links 30 — nicht vier unabhängige Ecken.

Praxisbeispiele

Eine abgerundete Karte in Pixeln. Verknüpfen Sie die Ecken und ziehen Sie auf 16px. Die Ausgabe ist border-radius: 16px;, die Vorschau zeigt an jeder Ecke eine sanfte 16-Pixel-Rundung, und die Deklaration ist so kurz, wie CSS es zulässt.

Ein squircle-artiges Hero-Panel. Wechseln Sie in den Ellipsenmodus, setzen Sie alle horizontalen Radien auf 40px und dann die vertikalen auf 60px. Da der vertikale Satz einheitlich ist, gibt es keine weitere Kürzung, und die Ausgabe wird zu border-radius: 40px / 60px;. Die Ecken sind höher als breit, was als modernes abgerundetes Rechteck statt als schlichte Karte wirkt.

Ein Akzent an zwei Ecken. Lösen Sie die Verknüpfung, lassen Sie oben links und unten rechts bei 10px und setzen Sie oben rechts und unten links auf 30px. Die Ausgabe reduziert sich auf border-radius: 10px 30px; — dieselbe Form wie mit allen vier Werten, nur kürzer.

Prozentwerte, Pixel und Wertwahl

Pixel geben einer Ecke eine feste physische Größe, die sich beim Größenwechsel des Elements nicht ändert: Ein Radius von 12px bleibt 12px, ob die Karte 200px oder 600px breit ist.

Prozentwerte lassen die Ecke mit dem Element skalieren, aber nicht so, wie viele erwarten. Ein horizontaler Prozentwert bezieht sich auf die Breite des Elements, ein vertikaler auf seine Höhe. Deshalb wird 50 % auf einem Quadrat zum Kreis, während 50 % auf einem Rechteck zur Ellipse wird. Prozentwerte sind ideal für Avatare und runde Badges, bei denen das Element zwar skaliert werden kann, aber rund bleiben soll. Für eine pillenförmige Schaltfläche ist ein fester Radius in Höhe der halben Buttonhöhe — oder ein bewusst überdimensionierter Wert wie 9999px — die verlässliche Wahl.

Ein paar Faustregeln verhindern, dass generierte Werte falsch wirken:

• Für Karten und Panels liest sich ein Radius zwischen 8px und 16px bewusst abgerundet, ohne verspielt zu sein. Ein Radius von 4px ist auf einem hochauflösenden Bildschirm kaum wahrnehmbar.
• Schaltflächen sehen meist mit einem Radius nahe der halben Höhe am besten aus (eine 40px hohe Schaltfläche mit 20px Radius) für eine Pille, oder mit demselben Radius wie Ihre Karten für einen eckigeren Look.
• Eingabefelder und Schaltflächen im selben Formular sollten einen Radius teilen, damit die Formen wie ein System und nicht wie zwei wirken.
• Elliptische Ecken ziehen Aufmerksamkeit auf sich, verwenden Sie sie einmal pro Bildschirm — ein Hero-Panel oder einen Avatar — und nicht auf jeder Fläche.

Ein strukturelles Detail sollten Sie kennen, bevor Sie die Deklaration kopieren: Der generierte Wert ist eine einzige border-radius-Eigenschaft, nicht vier separate Eckeneigenschaften. Setzt Ihr Designsystem border-radius bereits anderswo, überschreibt Ihr neuer Wert es, platzieren Sie die Regel also dort, wo sie gewinnen soll, und lassen Sie die Vorschau das Ergebnis bestätigen.

Die generierte Deklaration lesen

Das Ausgabefeld umhüllt den Wert mit einer kleinen Regel, damit er einfügebereit ist:

.box {
  border-radius: 10px 30px;
}

Selektor und geschweifte Klammern sind Bequemlichkeit, nicht Teil des Werts. Bearbeiten Sie eine bestehende Regel, kopieren Sie nur border-radius: 10px 30px;. Prototypen Sie von Grund auf, ist der ganze Block gültiges CSS, wie er dasteht. Derselbe Wert erscheint auf dem Live-Vorschauquadrat, weshalb die Vorschau der schnellste Weg ist, eine ungewöhnliche elliptische Figur zu prüfen, bevor Sie sie in ein Stylesheet übernehmen.

Häufige Fehler

• Erwarten, dass 50 % eine Pille ergibt. Auf jeder nicht quadratischen Box entsteht eine Ellipse. Verwenden Sie stattdessen einen Pixelwert in halber Höhe.
• Einheiten mischen. border-radius: 10px 50%; ist ungültiges CSS. Legen Sie sich für die gesamte Deklaration auf px oder % fest.
• Den Slash vergessen. Elliptische Radien brauchen a b c d / e f g h; ohne den Schrägstrich wird der zweite Satz als weitere Eckenwerte interpretiert.
• Annehmen, große Werte würden brechen. Werte über der Hälfte der kleineren Dimension werden vom Browser herunterskaliert, das visuelle Ergebnis ist also kleiner, als die Zahl vermuten lässt.
• Nur den Wert kopieren. Das Ausgabefeld enthält den vollständigen .box { ... }-Block; kopieren Sie die Deklaration, wenn Sie sie in eine bestehende Regel einfügen wollen.

Verwandte Tools

• CSS Box-Shadow-Generator — Mehrschichtige Box-Schatten mit Live-Vorschau gestalten.
• CSS Flexbox-Generator — Flexbox-Layouts visuell gestalten und das CSS kopieren.
• CSS Gradient-Generator — Eigene CSS-Verläufe für Ihre Layouts erstellen.