Kategorien
Stylesheets Webentwicklung

Elegante abgerundete Rahmen mit CSS

Elegante abgerundete Rahmen mit CSS. Mit border-radius ist es endlich möglich, Elemente (wie Rahmen) valide mit abgerundeten Ecken / Rahmen zu erstellen.

CSS Programming Image
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.

Von Michael

Diplom-Ingenieur
wohnhaft in München

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert