Erstellen Sie einen CSS-border-radius-Wert

Der CSS-border-radius-Generator wandelt einen, zwei, drei oder vier Eckradiuswerte in eine sofort nutzbare Kurzschreibweise um. Geben Sie übliche CSS-Längen oder Prozentwerte ein; Sie erhalten sowohl den reinen Kurzformwert als auch die vollständige border-radius-Deklaration. Die Reihenfolge entspricht der CSS-Spezifikation. Dadurch gestalten Sie jede Ecke konsistent, ohne erst zu ermitteln, welche Position welche Ecke steuert. Negative Radien werden abgewiesen, da sie in Stylesheets ungültig sind.

Wählen Sie einen bis vier Radiuswerte

Beginnen Sie mit der Anzahl von Werten, die zur gewünschten Form passt. Ein Wert weist allen vier Ecken denselben Radius zu und eignet sich damit für Karten, Schaltflächen, Eingabefelder und andere symmetrische Komponenten. Zwei Werte wechseln sich an gegenüberliegenden Ecken ab: Der erste steuert oben links und unten rechts, der zweite oben rechts und unten links.

Bei drei Werten gilt der erste für oben links, der zweite gemeinsam für oben rechts und unten links und der dritte für unten rechts. Vier Werte ermöglichen die unabhängige Steuerung im Uhrzeigersinn: oben links, oben rechts, unten rechts und unten links. Jeder Eintrag muss eine nicht negative CSS-Länge oder Prozentangabe sein, etwa 8px, 0.5rem, 12% oder 0.

Einheitenloses Null ist erlaubt, weil CSS diese Schreibweise zulässt; jede andere Zahl benötigt jedoch eine anerkannte Längeneinheit oder ein Prozentzeichen. Durch getrennte Eingaben bleibt die Zuordnung zwischen Position und Ecke sichtbar, bevor die endgültige Kurzschreibweise zusammengesetzt wird.

Lesen und verwenden Sie das erzeugte CSS

Das Ergebnis bietet zwei Felder für unterschiedliche Arbeitsabläufe. Die Werte werden in der von Ihnen angegebenen Reihenfolge und mit genau einem Leerzeichen dazwischen ausgegeben. Der Generator ordnet Ecken nicht unbemerkt neu, rechnet keine Einheiten um und kürzt wiederholte Werte nicht.

Das Bewahren der eingegebenen Darstellung macht die Ausgabe vorhersehbar und verändert keine bewusst gewählte Token-Syntax. Aus 8px und 16px entsteht beispielsweise border-radius: 8px 16px;, während vier Werte eine Deklaration im Uhrzeigersinn ergeben. Die Ausgabe ist deterministisch und enthält keine browserabhängige Messung.

Prüfen Sie Radien vor der Veröffentlichung

CSS-Eckradien dürfen nicht negativ sein. Deshalb beendet der Generator die Verarbeitung mit einem Eingabefehler, sobald ein Wert mit einem Minuszeichen beginnt. Er weist außerdem leere Einträge, nicht unterstützten Text, einheitenlose Zahlen ungleich null, Deklarationen mit Satzzeichen sowie Arrays außerhalb des Bereichs von einem bis vier Werten ab.

Diese Prüfung ist hilfreich, wenn Radiusangaben aus einem Formular, einer Konfigurationsdatei, einem Theme-Editor oder einem automatisierten Design-Token-Build stammen und fehlerhafter Text sonst unbemerkt in ein Stylesheet gelangen könnte. Unterstützt werden gängige absolute, schriftbezogene, viewportbezogene, physische und prozentuale Einheiten, darunter px, em, rem, vw, vh, vmin, vmax, ch, cm, mm, in, pt und pc sowie moderne Viewportvarianten. Diese Fähigkeit erzeugt die normale Kurzform mit einem Radius je Ecke; die durch einen Schrägstrich getrennte elliptische Syntax wird nicht erstellt.

Für elliptische Ecken halten Sie horizontale und vertikale Radien in Ihrem eigenen CSS getrennt. Verwenden Sie die zurückgegebene Deklaration als geprüften Baustein und betrachten Sie sie am tatsächlichen Element, denn Prozentwerte hängen von dessen Abmessungen ab.