Kostenlose Online-CSS-Border-Radius-Vorschau. Jede Ecke einzeln anpassen mit Live-Vorschau und Code kopieren. Im Browser.
Drücke Ctrl+D, um diese Seite als Lesezeichen zu speichern
Der Border-Radius-Previewer ist ein kostenloses Online-Tool zur visuellen Anpassung der CSS-Eigenschaft border-radius.
Wenden Sie border-radius: 50% auf ein quadratisches Element an, um einen perfekten Kreis zu erstellen. Setzen Sie alle vier Ecken auf 50%.
Ja, border-radius kann vier einzelne Werte haben: oben-links, oben-rechts, unten-rechts, unten-links. Dies ermöglicht einzigartige asymmetrische Formen.
Sechs bis zwölf Pixel bei Schaltflächen und acht bis sechzehn bei Karten passen zu den meisten Oberflächen. Wichtiger als der genaue Wert ist die Konsistenz: Tragen Buttons und Eingabefelder auf demselben Screen unterschiedliche Radien, wirkt das Layout unaufgeräumt. Sitzt ein Bild in einer Karte, geben Sie dem inneren Element einen etwas kleineren Radius als dem äußeren, sonst beißen sich die beiden Kurven sichtbar.
50 % bedeutet „die Hälfte jeder Seite", und sobald das Element nicht quadratisch ist, unterscheiden sich horizontaler und vertikaler Radius – es entsteht eine Ellipse. Für einen echten Kreis geben Sie width und height denselben Wert oder ergänzen aspect-ratio: 1. Soll ein Button, dessen Breite dem Text folgt, Pillenform bekommen, nehmen Sie statt 50 % einen großen festen Wert wie 9999px; die Enden bleiben dann bei jeder Höhe exakte Halbkreise.