Kurzschreibweise
Mit border-radius kannst du alle vier Ecken in einer Eigenschaft definieren: oben-links, oben-rechts, unten-rechts, unten-links.
border-radius: 10px 20px 30px 40px;
CSS Border-Radius-Generator
Ecken von HTML-Elementen visuell abrunden — CSS-Code kopieren und direkt einsetzen.
Einstellungen
Modus
Einheit
Ecken-Radius
10%
Vorschau
CSS-Code
border-radius: 10%;
Vorlagen
Ecken-Übersicht
10%
Oben links
Oben links
10%
Oben rechts
Oben rechts
10%
Unten rechts
Unten rechts
10%
Unten links
Unten links
Werbefläche 1
Werbefläche 2
Werbefläche 3
Werbefläche 4
Werbefläche 5
Werbefläche 6
Werbefläche 7
Werbefläche 8
CSS border-radius verstehen
Kreis und Pille
50% macht ein quadratisches Element zu einem Kreis. Für Pill-Buttons eignen sich grosse px-Werte wie 9999px oder 100px.
border-radius: 50%; /* Kreis */
border-radius: 9999px; /* Pille */
border-radius: 9999px; /* Pille */