Workshop Internet-Präsenz

Abgerundete Ecken - Cascading Style Sheets

Der Standard CSS Level 3 wird die Verwendung abgerundeter Ecken spezifizieren. Die Standardisierung ist aber noch abgeschlossen. Einen ersten Eindruck kann man aber bereits mit Mozilla Firefox (Mozilla Suite) bekommen, weil hier dieses Feature bereits implementiert ist. Momentan muss man aber aufgrund der nochlaufenden Standardisierung die Mozilla-interne Eigenschaftsbezeichnung wählen.

Mozilla-Eigenschaften:

• -moz-border-radius: radius (für alle vier Ecken; es lassen sich auch zwei, drei oder vier Werte ähnlich der border-Definition angeben, so dass die Ecken auch einzeln spezifizeiert werden können. Die Reihung beginnt in der linken oberen Ecke.)
• Für die Definition einer einzelnen Ecke gibt es die Eigenschaften
  • -moz-border-radius-topleft: radius
  • -moz-border-radius-topright: radius
  • -moz-border-radius-bottomleft: radius
  • -moz-border-radius-bottomright: radius

Aktuelle CSS3-Spezifikation:

• border-radius: radius oder
  border-radius: laenge-x laenge-y (Ecken können nicht nur mit Viertelkreisen, sondern auch mit Viertelellipsen dargestellt werden. laenge-x und laenge-y stellen die Entfernungen vom Ellipsenschwerpunkt dar).
• border-top-right-radius: laenge-x laenge-y
• border-bottom-right-radius: laenge-x laenge-y
• border-bottom-left-radius: laenge-x laenge-y
• border-top-left-radius: laenge-x laenge-y

Mehr zu dieser Thematik finden Sie auf den Seiten des WWW Consortiums und der Mozilla-Entwicklergemeinde:

• CSS3 Backgrounds and Borders Module
• Creating a Skin for Mozilla: In-Depth