Farbformate umwandeln
HEX-, RGB- und HSL-Farben mit Transparenz umrechnen, als Farbfeld ansehen und als CSS-Wert kopieren.
CSS-Ecken abrunden
Vier Ecken gemeinsam oder einzeln einstellen, elliptische Rundungen ansehen und border-radius als CSS exportieren.
Elliptische Ecken
Vorschau
CSS
Über dieses Tool
Vergleichen Sie runde und elliptische Ecken für Schaltflächen, Karten oder Abzeichen.
Anwendung
Wählen Sie px oder % und ändern Sie die Radien über Regler oder Zahlenfelder. Anfangs sind die vier Ecken gekoppelt; lösen Sie die Kopplung für Einzelwerte. In den elliptischen Einstellungen können Sie vertikale Radien gesondert aktivieren und so horizontale und vertikale Rundungen trennen.
Erlaubt sind 0–500 px oder 0–100 %. Vorschau und exportierte border-radius-Deklaration verwenden dieselben Werte. Prozentangaben hängen von der tatsächlichen Elementgröße ab. Ein Einheitenwechsel ändert die Bedeutung der Zahlen und erhält nicht automatisch die sichtbare Größe.
Häufige Fragen
Was bedeutet der Schrägstrich in border-radius?
Davor stehen horizontale, dahinter vertikale Radien. Überlappende Radien verkleinert CSS proportional, damit sie in die Box passen.
Warum ergibt 50% ein Oval statt eines Kreises?
Prozentuale Radien beziehen sich getrennt auf Breite und Höhe. Bei 50% wird ein rechteckiges Element zur Ellipse; für einen Kreis müssen Breite und Höhe gleich sein. Verwenden Sie Pixelwerte für feste Eckradien und prüfen Sie das CSS mit den tatsächlichen Abmessungen Ihres Elements.
Verwandte Werkzeuge
Wird in einem neuen Tab geöffnet
Kommentare
0