CSS/Eigenschaften/border-radius

Die Eigenschaft border-radius bestimmt den Radius, mit dem die Ecken eines Rahmens abgerundet werden.

erlaubte Werte	1 - 4 numerische Angaben inherit Vererbung steuernde Werte inherit, initial, unset und revert Defaultwert: siehe Einzeleigenschaften
anwendbar auf	alle Elemente (Unterschied Tag Element Attribut)
Browsersupport	Details: caniuse.com
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

• CSS/Tutorials/Hintergrund/äußere Gestaltung