Border Image

Hai semua :) Mungkin kalian tak asing dengan border-radius ataupun box-shadow. Tapi apakah sudah tahu dengan border-image? Loh, image kan gambar? Untuk apa gambar dalam sebuah border? Penasaran? Sebelum itu mari kita lihat properties apa saja yang ada di border dalam CSS.

1. border-radius : dengan properties ini elemen atau div yang kita buat bisa diberi radius agar tidak ada sudutnya seperti ini :

2. box-shadow : sesuai namanya dengan properties ini gambar ataupun elemen bisa kita beri bayangan seperti ini :

3. border-image

nah, ini yang akan kita pelajari pertama siapkan sebuah gambar. Ini contohnya :

Lalu lihat dan pelajarilah script di bawah ini :

See the Pen iFyDb by Dumet_School (@dumet_school) on CodePen.

Mudah kan membuatnya? Jadi, border-image ini bisa membuat border dari sebuah gambar.

Semoga bermanfaat ya :)