Zwei Prozentwerte pro Ecke ergeben einen elliptischen border-radius. Starten Sie mit einer Vorlage oder tippen Sie eigene Werte und kopieren Sie die Regel.
Läuft lokal in deinem BrowserDie Werkbank schreibt eine einzige Deklaration für das Element: border-radius mit einem horizontalen und einem vertikalen Wert pro Ecke, dazu Breite und Höhe der Vorschau. Die Bühne startet mit einem Kasten von 280 × 220 px, sodass der Wechsel von 18 % auf 50 % sofort sichtbar ist.
Es gibt keinen Ausführen-Knopf: Form und Codebereich folgen jeder Änderung. CSS kopieren legt genau diesen Block in die Zwischenablage, Zurücksetzen stellt Weiche Ecken (280 × 220, 18 %) wieder her.
Eigene (28 %), Weiche Ecken (18 %) und Pille (50 % auf einem 320 × 160-Kasten) sind symmetrisch: alle acht Werte stimmen überein. Kiesel (290 × 230) und Organischer Blob (280 × 250) mischen die Ecken — Kiesel beginnt bei 58 / 42 oben links und 34 / 62 oben rechts, sodass die Kontur nicht mehr wie ein abgerundetes Rechteck wirkt.
Jede Ecke nimmt zwei Prozentwerte an, weil CSS die Ecke als Ellipse zeichnet: der erste Wert ist der horizontale Radius, der zweite der vertikale. Der Export listet sie in der Reihenfolge oben links, oben rechts, unten rechts, unten links auf, zuerst die horizontale Reihe, nach dem Schrägstrich die vertikale.
Ein prozentualer border-radius wird gegen den eigenen Kasten des Elements aufgelöst, nicht gegen eine feste Pixelzahl, deshalb trägt eine Deklaration sowohl einen breiten Button als auch einen kleinen Avatar. Die Felder Breite und Höhe zeigen das: Sie skalieren die Vorschau, nicht die Radien der Deklaration.
Der Browser begrenzt außerdem Radien, die sich an einer Kante überlappen würden, weshalb die gezeichnete Form kleiner wirken kann als die Zahlen. Der Codebereich zeigt stets die tatsächlich verwendeten Werte — darum springen die Felder beim Verlassen in den gültigen Bereich zurück.
Der generierte Code ist ein Block: .rounded-shape mit width, height und einer border-radius-Zeile in der Form horizontal / vertikal. Es gibt keine Herstellerpräfixe, Media Queries oder zusätzlichen Selektoren — einfügen und die Klasse umbenennen genügt.
Das Werkzeug läuft vollständig in der Seite: Werte und Auswahl verlassen den Browser nicht. CSS kopieren legt den Block in die Zwischenablage und die Statuszeile bestätigt es, sodass sich die Regel gefahrlos vorbereiten lässt.