Abgerundete Ecken und Rahmen mit CSS
border-radius
Mit border-radius ist es endlich möglich, Elemente (wie Rahmen) valide mit abgerundeten Ecken / Rahmen zu erstellen.
Für Mozilla- und Safari-Browser gibt es bereits die anbieterspezifischen CSS-Eigenschaften -moz-border-radius und -khtml-border-radius um den Effekt zu erzielen.
Um den Radius für bestimmte Ecken zu definieren, können die Suffixe -topleft, -topright, -bottomright und -bottomleft verwendet werden. Bei Safari wird die Angabe der Ecke eingeschoben: -khtml-border-top-left-radius
Rahmen-Bilder
border-image
Die Eigenschaft border-image können für Rahmen Hintergrundbilder festgelegt werden. Die neue Eigenschaft kann die Angabe von bis zu drei URLs aufnehmen, um die Bilder einzubauen.
Außerdem können mit den Eigenschaften border-top-image, border-bottom-image, border-left-image und border-right-image für alle Kanten eigene Grafiken definiert werden. Die Definitionen der CSS-Eigenschaft werden bei einem Einsatz von überschrieben.
border-corner-image
Last but not least wird mit border-corner-image die Zuweisung von Bildern für alle 4 Ecken möglich sein. Wie von anderen border-Eigenschaften bekannt auch einzeln mit border-top-left-image, border-top-right-image, border-bottom-right-image und border-bottom-left-image.