Border-image: using images for your border

Fitur menarik lain dari border CSS3 yang baru adalah properti border-image. Dengan fitur ini Anda dapat menentukan gambar yang akan digunakan sebagai pengganti border normal dari suatu elemen. Fitur ini sebenarnya terbagi menjadi beberapa properti: border-image dan border-corner-image. Inilah detail dari kedua value tersebut:


border-image:

  • border-top-image
  • border-right-image
  • border-bottom-image
  • border-left-image
border-corner-image:

  • border-top-left-image
  • border-top-right-image
  • border-bottom-left-image
  • border-bottom-right-image


border-image baru bisa bekerja di Safari, chrome dan Firefox 3.1 (Alpha). Sintaks untuk menggunakannya adalah:

border-image: url(border.png) 27 27 27 27 round round;

dan hasilnya adalah :

Lorem ipsum dolor sit amet.

atau yang ini :

border-image: url(border.png) 27 27 27 27 stretch stretch;

Dan hasilnya adalah :

Lorem ipsum dolor sit amet.

Semakin terlihat menarik bukan. Nah berikut ini adalah screenshot-nya buat yang browsernya belom suport.
  • Yang pertama.


  • Yang kedua.



Script yang kupake
Spoiler for ngintip:


*.:。✿ Don't forget to come back again ✿.。.:*




Visit Wahyudi Blog !

Sumber: css3.info