Belajar CSS Part 21 : CSS3 Border Gambar

CSS3 BORDER GAMBAR

Assalamu'alaikum Wr. Wb

Hai sobat semua, terima kasih sudah mengunjungi blog saya ini. Sebelumnya kita sudah belajar mengenai Rounded Corners menggunakan CSS3, untuk kesempatan kali ini kita akan lanjut ke materi selnjutnya yaitu  membuat Border Gambar pada CSS3.

Langsung saja yuk...

Properti CSS3 border-image memungkinkan kita untuk menentukan gambar yang akan digunakan sebagai pengganti border yang normal disekitar  elemen.

Properti ini memiliki 3 bagian :

1. Gambar digunakan sebagai border/perbatasan
2. Dimana untuk mengiris gambar
3. Menentukan apakah bagian tengah harus diulang atau diregangkan

Contoh 1:

Hasilnya :

Contoh 2 :

Hasilnya :

Contoh 3 :

Hasilnya :

Silakan dicoba sendiri ya sobat. Apabila ada pertanyaan, silakan tinggalkan jejak dikolom komentar. Terima Kasih.

• Kesimpulan

Dengan menggunakan CSS3 kita bisa membuat border menggunakan gambar sehingga lebih menarik.

Referensi :
http://www.w3schools.com/css/css3_border_images.asp

Wassalamu'alaikum Wr. Wb