CSS Border Radius Generator

Pixel erzeugen eine feste Kurvengrößge unabhängig von der Elementgröße. Prozentwerte skalieren relativ zu den Elementabmessungen — „50%" auf einem 100 px großen Quadrat ergibt einen Radius von 50 px. Verwenden Sie px für einheitliche Schaltflächen und Karten. Verwenden Sie % für Formen, die proportional skalieren sollen, wie Kreise oder Pill-Schaltflächen.

Trennen Sie die Ecken mit dem Verknüpfungs-Umschalter, und passen Sie dann jeden Eck-Schieberegler einzeln an. Die CSS-Kurzschreibweise für vier Werte lautet: border-radius: oben-links oben-rechts unten-rechts unten-links (im Uhrzeigersinn von oben-links).

Ein Wert: „border-radius: 16px". Wenn oben-links/unten-rechts und oben-rechts/unten-links jeweils paarweise gleich sind: „border-radius: 10px 20px". Das Tool erzeugt stets die kompakteste Kurzschreibweise.

Eine Pillenform hat vollständig abgerundete Enden an einem rechteckigen Element. Setzen Sie einen sehr großen border-radius (typischerweise „9999px" oder „50%"). Der Browser begrenzt den Radius auf die Hälfte der kürzeren Seite und erzeugt so Halbkreise an jedem Ende. Verwenden Sie die Pillen-Voreinstellung in diesem Tool.

Das Tool unterstützt px und % als Einheitenoptionen. Falls Sie em oder rem benötigen, notieren Sie den Pixelwert und konvertieren Sie ihn manuell. Die border-radius-Eigenschaft akzeptiert jede gültige CSS-Längeneinheit (px, em, rem, % usw.).

Ja. border-radius beschneidet die gesamte Box, einschließlich Hintergrundbilder. Wenn untergeordnete Elemente über die abgerundeten Ecken hinausragen, fügen Sie „overflow: hidden" hinzu, um sie zu beschneiden. Die Rundung wird einheitlich auf Hintergrund, Rahmen und Box-Schatten angewendet.

Nein. Alles läuft in Ihrem Browser per JavaScript. Nichts verlässt Ihr Gerät.