Border Radius Generator

Mit dem Randradius-Generator arbeiten

1. Starte verknüpft. Mit dem "Verknüpft"-Schalter eingeschaltet, passt das Bewegen eines Eck-Schiebereglers alle vier gleichmäßig an - der schnellste Weg, eine Pille, einen Kreis oder eine Standardkarte zu gestalten.
2. Wechsle zu unverknüpft, wenn du Asymmetrie benötigst. Jeder der vier Schieberegler bildet auf oben-links, oben-rechts, unten-rechts, unten-links ab - dieselbe Reihenfolge, die das CSS-Kurzform verwendet.
3. Wechsle die Einheiten zwischen px und %. Pixel bleiben konstant, wenn das Element seine Größe ändert; Prozentsätze verfolgen die Box-Dimensionen und erzeugen elliptische Ecken bei nicht-quadratischen Elementen.
4. Probiere die voreingestellten Formen - Squircle, Blob, Pille, Kreis - als Ausgangspunkt, bevor du feinabstimmst.
5. Kopiere das CSS. Die Ausgabe verwendet die Vier-Wert-Kurzform border-radius: a b c d, die für jedes Stylesheet oder einen Tailwind-rounded-[var]-Beliebigwert kopierfertig ist.

Wie border-radius tatsächlich gezeichnet wird

CSS border-radius erzeugt eine Viertelellipse an jeder Ecke der Rahmen-Box des Elements. Der horizontale Radius beschneidet die oberen/unteren Kanten; der vertikale Radius beschneidet die linken/rechten Kanten. Wenn du einen einzelnen Wert wie 12px schreibst, sind beide Radien gleich und du erhältst einen kreisförmigen Bogen. Wenn du die Schrägstrich-Form 12px / 24px verwendest, unterscheiden sich der horizontale und vertikale Radius und du erhältst eine echte elliptische Ecke - die Form, die Designer manchmal als "squircle-ish"-Ausbuchtung bezeichnen.

Der Browser rastert diese Bögen mit demselben geglätteten Pfad-Rendering wie SVG, sodass abgerundete Ecken bei jedem devicePixelRatio scharf bleiben. Hintergründe, Rahmen, box-shadow und jedes overflow: hidden-Clipping respektieren alle automatisch den abgerundeten Umriss. Eine subtile Folge: border-radius wird auf die Rahmen-Box angewendet, sodass ein dicker Rahmen visuell eine engere innere Kurve als äußere Kurve hat, was mathematisch korrekt, aber bei Icon-Schaltflächen seltsam aussehen kann. Die CSS-Backgrounds und Borders-Modul Level 3 spezifiziert dieses Rendering, und jeder moderne Browser entspricht pixel-genau der Spezifikation.

Reale Situationen, in denen du es brauchst

• Karten-Komponenten bei 8-16px Radius - der vorherrschende Look in shadcn/ui, Material und iOS.
• Avatare bei 50% für einen perfekten Kreis, solange das Element quadratisch ist.
• Pillenförmige Schaltflächen mit border-radius: 9999px - der große Wert begrenzt sich auf die Hälfte der kürzeren Seite, was unabhängig vom Seitenverhältnis vollständig abgerundete Enden ergibt.
• Asymmetrische Karten wie Chat-Blasen, bei denen eine Ecke eckig und die anderen abgerundet sind.
• Organische "Blob"-Dekorationen mit der Acht-Wert-a b c d / e f g h-Schrägstrichform, um jeder Ecke eine einzigartige elliptische Form zu geben.
• Bildmasken, bei denen abgerundete Ecken plus overflow: hidden den Inhalt beschneiden, ohne SVG zu benötigen.

Randfälle, die Menschen stolpern lassen

• Prozentsatz auf nicht-quadratischen Elementen. border-radius: 50% auf einer 200x100-Box macht eine Ellipse, keinen Kreis. Verwende 9999px für eine garantierte Pille und gleiche width/height für einen garantierten Kreis.
• Radien größer als die Box. Der Browser skaliert sie automatisch, sodass sich benachbarte Ecken niemals überschneiden - border-radius: 500px auf einer 40px-Schaltfläche gibt dasselbe visuelle Ergebnis wie 20px. Du musst es nicht selbst begrenzen, aber sei dir bewusst, dass die wörtliche Zahl, die du in DevTools siehst, möglicherweise nicht gerendert wird.
• Innere vs. äußere Kurve bei Rahmen. Bei einem 4px-Rahmen und einem 8px-Radius hat die äußere Kurve einen 8px-Radius und die innere einen 4px-Radius. Füge padding plus einen kleineren inset-box-shadow hinzu, wenn beide Kurven übereinstimmen sollen.
• Transparente Hintergründe plus background-image. Ein mit background-image gesetztes Bild wird an den abgerundeten Ecken beschnitten; aber <img>-Tags innerhalb eines Elements werden nicht beschnitten - du benötigst overflow: hidden auf dem umschließenden Element.
• Fokus-Umrisse. Viele Browser zeichnen jetzt den :focus-visible-Umriss gemäß dem Radius (per CSS UI Level 4), aber ältere Versionen zeichneten noch Rechtecke - wenn du überall einen abgerundeten Fokusring benötigst, wende outline-offset plus einen benutzerdefinierten box-shadow an.
• Echte iOS-ähnliche "Squircles". CSS-Bögen sind kreisförmig, nicht die Superellipse, die Apple verwendet. Um iOS-App-Icons zu entsprechen, benötigst du die CSS Houdini Paint API oder eine SVG-Form.

Die Spezifikation und ihre Geschichte

Abgerundete Ecken waren eine der meistgewünschten CSS-Funktionen der 2000er Jahre - bevor die Unterstützung kam, verwendeten Entwickler verschachtelte abgerundete PNG-Ecken, Bild-Sprites oder JavaScript-Canvas-Hacks. border-radius erschien in Firefox 1.0 (2004) mit dem -moz--Präfix, dann -webkit- und schließlich ohne Präfix in allen wichtigen Browsern um 2011 mit IE9. Es ist jetzt in CSS Backgrounds and Borders Module Level 3 definiert, zusammen mit den erweiterten Per-Ecken-Eigenschaften (border-top-left-radius usw.) und der elliptischen Schrägstrich-Syntax. Jeder Wert im Kurzschreibweise akzeptiert jede <length> oder <percentage>, und logische Eigenschafts-Varianten wie border-start-end-radius sind in CSS Logical Properties Level 1 für RTL-freundliche Layouts spezifiziert.

Generator versus handgeschrieben

Für ein einzelnes border-radius: 8px brauchst du absolut kein Werkzeug. Wo dieser Generator seinen Nutzen zeigt, ist wenn du asymmetrische oder elliptische Ecken benötigst - die Acht-Wert-Syntax 40px 20px 40px 20px / 20px 40px 20px 40px ist wirklich schwer zu visualisieren ohne eine Live-Vorschau. Figma und Sketch geben dieselbe Eigenschaft über Plugins aus, aber sie lassen dich nicht mit CSS-spezifischen Eigenheiten wie der Randradius-Skalierungsregel oder dem Verhalten von Prozentsätzen bei flüssigen Containern experimentieren. Im Vergleich zu Tailwinds rounded-*-Utilities zeigt dir dieses Werkzeug, welchem numerischen Pixelwert jede Klasse entspricht, was nützlich ist, wenn du Einzelwerte außerhalb der Skala benötigst. Für Design-System-Arbeit ist der beste Workflow: hier prototypisieren, drei bis fünf Werte auswählen, die deinen Bedarf decken, und sie dann als Tokens kodifizieren.