CSS/Eigenschaften/border-radius
Aus SELFHTML-Wiki
< CSS | Eigenschaften
Die Eigenschaft border-radius bestimmt den Radius, mit dem die Ecken eines Rahmens abgerundet werden.
erlaubte Werte |
|
---|---|
anwendbar auf | alle Elemente (Unterschied Tag Element Attribut) |
Vererbung | nein |
animierbar | ja |
Beispiel
div { border-radius: 1em 2em 2em; }
Alle div-Elemente erhalten einen abgerundeten Rahmen, wobei die obere, linke Ecke im Gegensatz zu den anderen Ecken mit 2em hier nur 1em Radius hat.
Beachten Sie:
- border-radius ist die Kurzform für die für Eigenschaften border-top-left-radius, border-top-right-radius, border-bottom-right-radius und border-bottom-left-radius.
- Der Radius wird auch auf Hintergründe und Schatteneffekte angewendet, selbst wenn das Element über keinen Rahmen verfügt.
Empfehlung: Um den Elementen
thead
, tbody
, tfoot
oder tr
einen sichtbaren Rahmen zuzuweisen, müssen die Rahmen innerhalb der Tabelle zusammenfallen (d. h. table { border-collapse: collapse; }
)Weblinks
- Spezifikation (W3C): CSS3 Curve Radii: the ‘border-radius’ properties
Siehe auch
Liste der CSS-Eigenschaften
- Rahmen
- border
- border-radius
- border-image
- border-collapse
- border-spacing
- box-decoration-break
- box-shadow
- outline
- outline-offset
- rotate
- scale
- transform
- transform-origin
- transform-style
- translate
- perspective
- perspective-origin
- backface-visibility
- Abstände
- Benutzeroberfläche
- generierter Inhalt
- Größenangaben
- Grid Layout
- Hintergründe
- Listen
- Tabellen
- Positionierung und Anzeige
- Schriftformatierung
- Textausrichtung
- Animationen