Border-image: Gunakan Image Buat Bordermu

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

Tidak ada komentar:

Posting Komentar

Plisss...
Jangan nyepam (spam), jangan promosi (apapun itu), jangan SARA, jangan OOT...

Mohon kerja samanya, berikan komentar yang berbobot dan bermanfaat bagi semua... ^^

Artikel Unggulan

Panduan Makan Sehat bagi Generasi Z: Tips Mudah untuk Menjaga Energi dan Kesehatan

Menjaga Kesehatan dan Energi saat Berlatih: Nutrisi Penting untuk Atlet Generasi Z Gaya hidup aktif dan olahraga merupakan hal yang sangat p...

Paling Populer dalam Sebulan