Menetapkan Gambar Sebagai Border Di Css3
Versi usang CSS hanya membolehkan kita membuat garis tepi sederhana, misalnya menyerupai berikut:
Di CSS3 dimungkinkan kita memakai gambar sebagai border. Untuk memakai gambar sebagai border, dapat gunakan properti border-image
CSS3.
Berikut pola memakai border-image
:
Gambar yang dipakai untuk pola border di atas:
Gambar di ambil dari W3Schools.com.
Nilai properti border-image
yaitu border-image-source
, border-image-slice
, border-image-width
, border-image-outset
dan border-image-repeat
yang dipisahkan spasi.
Bentuk penulisannya:
Contoh berikut menambahkan border-image
untuk elemen ber-ID ‘myDIV’:
Di mana elemen DIV ber-ID ‘myDIV’ yang diatur oleh border-image
mungkin menyerupai ini:
border-image
di dukung Firefox, Chrome, dan Safari 6. Untuk Opera tambahkan prefix -o-
dan untuk Safari 5 tambahkan prefix -webkit-
. Sehingga CSS akan menjadi: