Border-Radius-Generator
Legen Sie jede Ecke fest und kopieren Sie das CSS.
- Läuft in Ihrem Browser — Ihr Text wird nirgendwohin gesendet
- Ohne Anmeldung, ohne Kontingent, so oft nutzbar, wie Sie möchten
So funktioniert es
border-radius ist einfach, bis man drei Ecken abgerundet und eine eckig haben will – dann muss jeder die Reihenfolge der vier Werte nachschlagen.
Die Reihenfolge, ein für alle Mal
Oben links, oben rechts, unten rechts, unten links – im Uhrzeigersinn, oben links beginnend. Dieselbe Reihenfolge im Uhrzeigersinn ab oben links gilt auch für die Kurzschreibweisen von margin, padding und border, was man sich einmal merken sollte.
Pixel oder Prozent
Pixel ergeben unabhängig von der Größe des Elements dieselbe Rundung. Prozentwerte beziehen sich auf Breite und Höhe des Elements selbst, sodass die Rundung mitskaliert – und ein Radius von 50 % ergibt bei einem Quadrat einen perfekten Kreis, der Standardtrick für runde Avatare.
Die Pillenform
Ein Radius, der größer als die halbe Höhe des Elements ist, wird auf genau die Hälfte begrenzt, weshalb border-radius: 999px bei jeder Höhe zuverlässig eine Pille ergibt. Das ist robuster als den richtigen Wert zu berechnen, weil es auch dann funktioniert, wenn sich der Inhalt ändert.
Wenn Ecken bei verschachtelten Elementen falsch aussehen
Ein abgerundeter Kasten in einem anderen abgerundeten Kasten braucht innen einen kleineren Radius, verringert um den Innenabstand dazwischen, sonst liegen die Rundungen nicht konzentrisch. Es ist ein kleines Detail, das Karten sauber gemacht aussehen lässt.
Border-Radius-Generator – Fragen
In welcher Reihenfolge stehen die vier Werte?
Oben links, oben rechts, unten rechts, unten links – im Uhrzeigersinn, von oben links beginnend.
Wie erzeuge ich einen perfekten Kreis?
border-radius: 50% bei einem Element, das genau quadratisch ist.
Wie erzeuge ich einen pillenförmigen Button?
Verwenden Sie einen großen Wert wie 999px. Browser begrenzen ihn auf die halbe Höhe, sodass es bei jeder Größe funktioniert.
Sollte ich Pixel oder Prozent verwenden?
Pixel für eine gleichbleibende Rundung; Prozent, wenn sie mit dem Element skalieren soll.
Funktioniert es überall?
Ja. border-radius wird seit weit über zehn Jahren ohne Präfix unterstützt.