Menetapkan Gambar sebagai Border di CSS3

Versi lama CSS hanya membolehkan kita membuat garis tepi sederhana, contohnya seperti berikut:

Di CSS3 dimungkinkan kita menggunakan gambar sebagai border. Untuk menggunakan gambar sebagai border, bisa gunakan properti border-image CSS3.

Berikut contoh menggunakan border-image:

Gambar yang digunakan untuk contoh border di atas:

Gambar di ambil dari W3Schools.com.

Nilai properti border-image adalah 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 seperti ini:

<DIV ID="myDIV"></DIV>

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; }