border-radius: 50px;Lerne HTML, CSS und JavaScript kostenlos mit der ReadyTools Academy.
Verfolge deinen Lernfortschritt, wachse in deinem Tempo und habe Spaß dabei! 🎯
In CSS wird die border-radius-Eigenschaft verwendet, um die Rundheit der Ecken eines HTML-Elements zu steuern. Sie ermöglicht es, Elemente mit abgerundeten Ecken zu erstellen, was Ihrem Design ein weicheres und ansprechenderes Erscheinungsbild verleiht.
Die border-radius-Eigenschaft kann einen oder zwei Werte akzeptieren, die die Radien für die vier Ecken des Elements bestimmen. Wenn Sie zwei Werte angeben, legt der erste Wert den horizontalen Radius und der zweite Wert den vertikalen Radius fest. Wenn Sie nur einen Wert angeben, werden sowohl der horizontale als auch der vertikale Radius festgelegt, wodurch alle Ecken gleichmäßig abgerundet werden.
Hier ist die grundlegende Syntax:
.rounded-element {
border-radius: 10px;
}
.rounded-element {
border-radius: 10px 20px;
}
.rounded-element {
border-radius: 10px 20px 30px 40px;
}In diesem Beispiel:
Die Klasse .rounded-element setzt den Randradius des Elements.
Sie können den Grad der Rundheit steuern, indem Sie die Werte anpassen. Wenn Sie vier Werte für jede Ecke einzeln angeben, können Sie einzigartige Radien für jede Ecke festlegen und so komplexere Formen mit abgerundeten Ecken erstellen.
Die border-radius-Eigenschaft wird häufig verwendet, um Buttons, Karten und andere UI-Elemente zu erstellen, um das Erscheinungsbild zu verbessern und das visuelle Design von Webseiten zu optimieren.
Sprache wählen
Thema wählen
© 2025 ReadyTools. Alle Rechte vorbehalten.