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:

border-image: source slice width outset repeat;

Contoh berikut menambahkan border-image untuk elemen ber-ID ‘myDIV’:

#myDIV { border: 15px solid transparent; width: 250px; padding: 10px 20px; border-image: url(border.png) 30 30 round; }

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:

#myDIV { border: 15px solid transparent; width: 250px; padding: 10px 20px; border-image: url(border.png) 30 30 round; -o-border-image: url(border.png) 30 30 round; -webkit-border-image: url(border.png) 30 30 round; }

Demikian yang dapat kami share kepada sobat source code aplikasi pada kesempatan ini, semoga dapat bermanfaat dan bisa menjadi referensi pemrograman bagi anda. Jangan lupa like Fan Page kami, dan SUBSCRIBE Channel Youtube kami untuk dapatkan update source code aplikasi terbaru.

Ahmad Code