Wichtigste Erkenntnisse
- 01Drei Modi — einheitlich, pro Ecke und elliptisch — decken alles von einfachen abgerundeten Schaltflächen bis zu organischen Blob-Formen ab.
- 02Unterstützt px, %, und rem Einheiten, jede mit unterschiedlichem Skalierungsverhalten.
- 03Der elliptische Modus zeigt horizontale und vertikale Radien pro Ecke für die vollständige border-radius-Syntax von CSS.
- 04Die Live-Vorschau verwendet die echte CSS-Eigenschaft, daher ist das, was Sie sehen, genau das, was Ihr Browser rendert.
Von einfachen abgerundeten Ecken bis zu organischen Blob-Formen
Ein vier-Ecken border-radius-Wert ist einfach genug, um aus dem Gedächtnis einzutippen — border-radius: 8px. Aber sobald Sie unterschiedliche Radien pro Ecke benötigen oder die CSS-Ellipsensyntax für organische Formen wünschen, wird die Kurzform schnell kryptisch. Die vollständige Form ist top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y — acht Werte in einer bestimmten Reihenfolge.
Der Border-Radius-Generator von Handytool ermöglicht es Ihnen, Schieberegler für jede Ecke in jedem Modus zu ziehen und die Form live zu aktualisieren. Wechseln Sie zwischen px, % und rem ohne Neuberechnung und kopieren Sie die korrekte Kurzform oder CSS-Deklaration in Langform, wenn Sie fertig sind.
So gestalten Sie einen Border Radius
- 01
Wählen Sie einen Modus
Der einheitliche Modus wendet einen Radius auf alle vier Ecken an. Der Pro-Ecke-Modus steuert jede Ecke unabhängig. Der elliptische Modus fügt pro Ecke einen separaten horizontalen und vertikalen Radius hinzu.
- 02
Wählen Sie eine Einheit
Wählen Sie px für absolute Größen, % für Werte, die sich mit den Abmessungen des Elements skalieren, oder rem für Größen, die an die Wurzelschriftgröße gebunden sind.
- 03
Ziehen Sie die Schieberegler
Passen Sie die Radiuswerte an und beobachten Sie, wie sich das Vorschauelement live aktualisiert. Ziehen Sie im Pro-Ecke-Modus jeden Schieberegler der Ecke unabhängig.
- 04
Vorschau der Form
Das Vorschaufeld wendet die tatsächliche CSS border-radius-Eigenschaft an, daher ist die Form, die Sie sehen, die Form, die Ihr Browser rendert.
- 05
CSS kopieren
Klicken Sie auf Kopieren, um die border-radius-Deklaration zu erfassen und in Ihr Stylesheet einzufügen.
Häufige Formen und wann Sie jeden Modus verwenden
- 01Pille-Schaltfläche: einheitlicher % Modus, auf 50% gesetzt — immer eine volle Pille unabhängig von der Schaltflächenbreite
- 02Karte mit subtiler Rundung: einheitlicher px Modus, 8–16px — das häufigste UI-Muster
- 03Asymmetrisches Tag oder Label: Pro-Ecke-Modus, scharf auf einer Seite, abgerundet auf der anderen
- 04Avatar-Kreis: einheitlicher % Modus, 50% — skaliert mit dem Bild-Container
- 05Organische Blob-Form: elliptischer Modus mit unterschiedlichen X/Y-Werten pro Ecke
Sofortige Vorschau, nichts hochgeladen
Der Border-Radius-Generator ist vollständig clientseitig. Schieberegler, Modusschalter und Einheitsänderungen aktualisieren die Vorschau sofort ohne Server-Roundtrip. Es gibt kein Konto und keine Ratenbegrenzung.
Das Tool funktioniert in allen modernen Browsern. Die border-radius-Eigenschaft — einschließlich elliptischer X/Y-Syntax — wird in jeder aktuellen Version von Safari, Firefox, Edge und Chrome unterstützt, daher ist die Ausgabe sicher zu verwenden ohne Vendor-Präfixe oder Fallbacks.
Häufig gestellte Fragen zum Border-Radius-Generator
Was ist der Unterschied zwischen px und % für border-radius?
Pixel-Radien sind absolut — 16px ist immer 16px. Prozent-Radien sind relativ zu den Abmessungen des Elements, daher erzeugt 50% einen perfekten Kreis auf einer quadratischen Box und eine Ellipse auf einem Rechteck.
Wann sollte ich den elliptischen Modus verwenden?
Verwenden Sie den elliptischen Modus, wenn Sie eine Ecke möchten, die auf einer Achse mehr hervorsteht — für eine horizontale Pille, eine Blattform oder eine organische Blob. CSS drückt dies als X-Radien / Y-Radien in der border-radius-Kurzform aus.
Warum sieht mein Prozent-Radius auf einer nicht-quadratischen Box falsch aus?
Horizontale Prozentsätze sind relativ zur Breite des Elements; vertikale Prozentsätze zur Höhe. Bei einem breiten, flachen Element erstrecken sich die Ecken eher zu Ellipsen als zu Kreisbögen.
Funktioniert die Ausgabe in jedem Browser?
Ja — border-radius einschließlich elliptischer Syntax wird in jedem modernen Browser unterstützt: alle aktuellen Versionen von Safari, Firefox, Edge und Chrome. Keine Vendor-Präfixe erforderlich.
Wie erstelle ich einen perfekten Kreis mit border-radius?
Setzen Sie alle Ecken auf 50% im Prozent-Modus auf einem quadratischen Element. Das Element benötigt auch gleiche Breite und Höhe — verwenden Sie aspect-ratio: 1 / 1, wenn die Größe dynamisch ist.