Referenz:CSS/Eigenschaften/border-radius

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Eigenschaft border-radius CSS 3.0
Beschreibung bestimmt Radius, mit dem die Ecken eines Rahmens abgerundet werden
erlaubte Werte
default-Wert

siehe Einzeleigenschaften

anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Vererbung nein
animierbar ja
Browsersupport
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
Spezifikation W3c logo klein.gif CSS3 Curve Radii: the ‘border-radius’ properties
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.
Tipp

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;})