Atribut border-image CSS

Definisi dan penggunaan

Atribut border-image adalah atribut singkat yang digunakan untuk menetapkan berikut ini:

Jika nilai diabaikan, akan diatur ke nilai default.

Petunjuk:Gunakan atribut border-image-* untuk membangun tombol yang indah dan dapat berubah ukuran!

Lihat pula:

Panduan CSS3:Garis border CSS3

Contoh

Tentukan gambar untuk memeriksa garis luar elemen div:

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

Coba sendiri

Ada banyak contoh lain di bawah halaman.

Syntaks CSS

border-image: source slice width outset repeat|initial|inherit;

Nilai atribut

Nilai Deskripsi Pengujian
border-image-source Jalur gambar yang digunakan di garis.
border-image-slice Pemindahan dalam garis gambar.
border-image-width Lebar garis gambar.
border-image-outset Jumlah yang di luar area garis gambar.
border-image-repeat Apakah garis gambar di sebelah luar garis memanjang (repeated), memutar (rounded) atau menarik (stretched). Pengujian

Detil teknis

Nilai default: none 100% 1 0 stretch
Inheritance: no
Versi: CSS3
Syntaks JavaScript: object.style.borderImage="url(border.png) 30 30 round"

Beberapa contoh lain

Tombol Border-image
Contoh ini menunjukkan bagaimana untuk membuat tombol melalui atribut border-image.

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang mendukung atribut ini penuh.

Chrome IE / Edge Firefox Safari Opera
16.0
4.0 -webkit-		 11.0 15.0
3.5 -moz-		 6.0
3.1 -webkit-		 15.0
11.0 -o-