Aufgabenpfad / von der Eingabe zum Ergebnis
So formst du einen CSS-Eckenradius
- 01
Wähle die Einheit
Setze Einheit auf Pixel oder Prozent — der Arbeitsbereich startet in Pixel. Pixel bleiben bei jeder Elementgröße konstant; Prozentwerte skalieren mit dem Element, was organische, asymmetrische Formen erst möglich macht.
- 02
Passe die vier Ecken an
Bewege Oben links, Oben rechts, Unten rechts und Unten links — jeweils von 0 bis 100 in der gewählten Einheit, in Schritten von 1. Alle vier starten bei 24 px, und die Vorschaukarte zeichnet sich bei jeder Änderung neu.
- 03
Verknüpfe die Ecken oder löse sie
Lass Alle Ecken verknüpfen aktiviert, um jede Ecke gleichzeitig zu ändern, oder schalte es aus, um jede Ecke unabhängig zu formen. Der Arbeitsbereich sagt es neben dem Schalter: Solange verknüpft, aktualisiert das Ändern einer Ecke alle vier.
- 04
Probiere die Beispielform
Drücke Beispiel laden für eine asymmetrische Referenz: Oben links und Unten rechts bei 64 px, Oben rechts und Unten links bei 12 px, unverknüpft — die diagonale Blattform, die auf Karten und Avataren verwendet wird. Zurücksetzen kehrt zum einheitlichen 24-px-Standard zurück.
- 05
Vertikale Radien setzen
Unter Vertikale Radien bekommt jede Ecke einen zweiten Wert von 0 bis 100 in derselben Einheit. Die erste Änderung schaltet Alle Ecken verknüpfen aus und schreibt die Deklaration als horizontal / vertikal: vier Werte im Uhrzeigersinn ab oben links, ein Schrägstrich, dann vier weitere – so werden die Ecken elliptisch. Das Statusbadge zeigt GÜLTIGES CSS; ein Wert außerhalb des Bereichs schaltet es auf WERTE PRÜFEN und sperrt Kopieren und Herunterladen.
- 06
Kopiere oder lade das CSS herunter
Aktuelles Ergebnis exportieren. CSS / HTML. HTML enthält das aktuelle CSS und ein funktionierendes Beispiel. Native Steuerelemente unterstützen Tastatureingaben.