Was ist CSS Border Radius?
Die CSS-Eigenschaft border-radius rundet die Ecken eines Elements ab. Sie können alle vier Ecken einheitlich festlegen oder jede Ecke einzeln steuern, um kreative Formen wie Pillenkapseln, Kreise oder organische tropfenförmige Designs zu erstellen.
Häufige Border-Radius-Muster
- Pillenform: Stellen Sie border-radius auf die Hälfte der Höhe des Elements ein (z. B.
border-radius: 9999px). - Kreis: Verwenden Sie
border-radius: 50%auf einem quadratischen Element. - Subtile Abrundung: Kleine Werte wie 4-8px für Kartecken und Schaltflächen.
Häufig gestellte Fragen
Kann ich Prozentangaben für border-radius verwenden?
Ja. Prozentwerte sind relativ zu den Abmessungen des Elements. 50% auf einem quadratischen Element erzeugt einen perfekten Kreis. Bei nicht-quadratischen Elementen entsteht eine Ellipse.
Funktioniert border-radius mit Bildern?
Ja. Wenden Sie border-radius direkt auf <img>-Elemente oder deren Container an, um abgerundete Bildformen zu erstellen. Kombinieren Sie mit overflow: hidden für saubere Kanten.