CSS border-radius für jede Ecke mit Live-Vorschau und Voreinstellungen festlegen
Ein Border-Radius-Generator lässt Sie die Ecken eines Elements visuell abrunden — jede Ecke mit Reglern anpassen und eine Live-Vorschau beobachten — und dann den exakten border-radius-CSS-Wert kopieren. Abgerundete Ecken sind einer der häufigsten Kniffe im modernen Interface-Design und mildern Karten, Buttons, Eingabefelder und Bilder, aber das CSS dahinter kann jede der vier Ecken unabhängig setzen und sie sogar elliptisch machen, was allein aus den Zahlen schwer vorstellbar ist. Einen Regler zu ziehen und die Form sich ändern zu sehen ist weit schneller, als Werte blind zu bearbeiten.
Das Detail, das die meisten nicht ahnen, ist die Bandbreite von border-radius: über eine gleichmäßige Rundung hinaus können Sie jeder Ecke ihren eigenen Radius geben und zwei Werte pro Ecke nutzen, um elliptische statt kreisförmige Kurven zu erzeugen — so entstehen organische, asymmetrische „Blob"-Formen. Ein ausreichend großer gleicher Radius macht aus einem Quadrat einen perfekten Kreis. Dieses Tool erzeugt standardbasiertes CSS im Browser mit Presets und Pro-Ecke-Kontrolle, bereit zum Einfügen auf jedem Element.
Ja. border-radius akzeptiert bis zu vier Werte, einen pro Ecke (oben links, oben rechts, unten rechts, unten links), Sie können also manche abrunden und andere eckig lassen oder jeder einen anderen Betrag geben. Der Generator bietet genau dafür Pro-Ecke-Kontrolle.
Setzen Sie den border-radius auf 50% (oder die halbe Elementbreite in Pixeln) bei einem quadratischen Element. Da der Radius die Mitte jeder Seite erreicht, verschmelzen die Ecken zu einem durchgehenden Kreis. Eine Pillenform entsteht aus einem großen Radius bei einem breiteren als hohen Element.
Ein einzelner Wert macht eine kreisförmige (Viertelkreis-)Ecke; zwei Werte geben der Ecke getrennte horizontale und vertikale Radien und erzeugen eine elliptische Kurve. Verschiedene elliptische Werte je Ecke zu kombinieren ist, wie weiche, organische „Blob"-Formen entstehen.
Ja. Ein Pixelradius ist eine feste Größe, ein Prozentwert ist relativ zu den Elementmaßen und skaliert also beim Verändern der Größe. Prozentwerte sind, wie 50% zuverlässig einen Kreis auf jedem Quadrat erzeugt, unabhängig von dessen tatsächlicher Größe.
Box-Shadow-Generator · Flexbox-Generator · CSS-Grid-Generator · Text-Shadow-Generator · CSS-Animations-Generator · CSS-Filter-Generator