CSS Border-Radius Generator - Visueller Eckenrunder

A Dieser Generator erzeugt standardmäßige CSS-Eigenschaften, keine Custom Properties wie `--radius: 20px`. Du müsstest die Ausgabe manuell in einen `var()`-Aufruf in deinem Stylesheet einbetten. Kopiere den Code, ersetze den Wert durch `var(--mein-radius)`. Der Generator ist für schnelle visuelle Anpassungen gedacht — für CSS-Variablen übernimmst du die Werte selbst. Das dauert etwa 30 Sekunden.

A Abgerundete Ecken nutzen in modernen Browsern die GPU-Beschleunigung und sind daher schneller als komplexe Schatten oder Verläufe. Aber wenn du auf einem alten Handy Dutzende Elemente mit border-radius stapelst, leidet der Akku. Freiberufliche Entwickler packen manchmal 50+ runde Karten auf eine Seite – dann merkst du die Verzögerung. Bleib unter 30 Elementen mit Radien unter 20px für günstige Android-Geräte. Teste sicherheitshalber auf einem 2019er Moto G.

A Nein, eine Tastenkombination gibt’s nicht. Du musst den Reset-Button anklicken oder jede Ecke manuell auf 0 setzen. Freelancer vergeuden oft zehn Minuten, weil sie Ecken verstellen statt zurückzusetzen — drück einfach das Reset-Symbol oben rechts. Es löscht alle Felder sofort.

A Nur wenn das Element ein perfektes Quadrat ist und alle Ecken auf 50% gesetzt sind. Bei einer 200x200px Box erzeugt border-radius: 50% einen echten Kreis. Aber bei einem 300x200px Rechteck entsteht ein Oval – der horizontale und vertikale Radius unterscheiden sich. Der Generator zeigt das live, also zieh einen Eck-Regler auf einer rechteckigen Box. Du siehst, wie sie sich in eine Pillenform verwandelt, sobald alle vier Ecken 50% erreichen. Das ist kein Fehler, sondern CSS-Mathematik.

A Dafür ist die Entsperren-Schaltfläche da. Klicke sie an, um die vier Ecken voneinander zu lösen, und setze dann oben links und unten rechts auf deinen Wunschradius, während die anderen beiden bei 0 bleiben. Für einen Blatteffekt bei einem 120px breiten Button probierst du 60px an diesen diagonalen Ecken. So bekommst du eine weiche Tropfenform. Die Vorschau aktualisiert sich sofort, also spiele mit den Reglern, bis die Form organisch wirkt. Falls du dich verlierst, bringt das Reset-Symbol alles auf Null zurück.

A Ältere Firefox-Versionen hatten einen Bug mit Sub-Pixel-Rundung, wodurch Kurven unter 4px Radius gezackt wirkten. Chrome rendert dieselben Werte glatter. Dein generierter Code ist nicht falsch — die Rendering-Engines arbeiten einfach unterschiedlich. Setze mindestens 6px Radius an, um die Abweichung zu kaschieren, und ergänze `-moz-border-radius` nur, wenn du Firefox ESR 102 unterstützen musst. Für moderne Browser reicht die Standard-Eigenschaft völlig aus. Ich prüfe Ausgaben deshalb immer in beiden Browsern, bevor etwas live geht.

A Nein. Kombinieren Sie Prozente, Pixel und entkoppelte Ecken, um organische Formen zu bauen. Ein 100px Element mit oben links 100%, oben rechts 20px und unten 0 ergibt eine schräge Blase. Exportieren Sie den Code und ergänzen Sie clip-path für konkave Kurven. Probieren Sie zuerst die Voreinstellungen — das geht schneller als manuelles Tippen. Tricks: Unterschiedlich dicke Rahmen verändern die Optik der Rundung, was viele übersehen.

A Ja, du kannst Änderungen am border-radius beim Hovern über Buttons animieren. Füge dazu eine Übergangsdauer von 0.3s ease in deinen generierten CSS-Code ein. Beim Überfahren mit der Maus verformen sich die Ecken nahtlos von eckig zu rund. Achte darauf, dass Start- und Zieleinheiten übereinstimmen. Das Animieren von Pixeln zu Prozentwerten führt sonst zu einem unschönen Sprung.

A Der Code dieses Generators gestaltet nur den Rahmenkasten, weshalb Bilder überstehen können, sofern du nicht overflow hidden hinzufügst. Ich habe das letzte Woche bei einem Projekt auf die harte Tour gelernt. Füge einfach overflow: hidden direkt unter deinem border-radius ein. Das zwingt das Bild dazu, sich sauber an die Kurven anzupassen. Teste es am besten gleich mit einem Beispielfoto.