Tutorial Belajar CSS Bagian 20 : Cara Mengatur Border Image di CSS

0
1594

Pa tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 19 : Cara Membuat Rounded Corners di CSS. Selanjutnya, kita akan belajar cara mengatur border image di CSS.

Properti border-image CSS digunakan untuk menambahkan border gambar ke beberapa elemen.

Anda tidak perlu menggunakan kode HTML apa pun untuk memanggil border image.

Contoh sintaks border-image adalah sebagai berikut :

#borderimg {
   border: 10px solid transparent;
   padding: 15px;
}

Nilai yang paling umum digunakan ditunjukkan di bawah ini :

No.Nilai & Deskripsi
1border-image-source
Digunakan untuk menentukan sumber border image
2border-image-slice
Digunakan untuk memotong border image
3border-image-width
Digunakan untuk mengatur lebar border image
4border-image-repeat
Digunakan untuk mengatur border image perulangan border sebagai rounded, repeat dan stretched

Berikut adalah contoh penggunaan border-image yang digunakan sebagai batas gambar untuk elemen.

<html>
   <head>
      <style>
         #borderimg1 { 
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(https://img.icons8.com/nolan/64/heart-border.png);
            border-image-repeat: round;
            border-image-slice: 30;
            border-image-width: 10px;
         }
         #borderimg2 { 
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(https://img.icons8.com/nolan/64/heart-border.png);
            border-image-repeat: round;
            border-image-slice: 30;
            border-image-width: 20px;
         }
         #borderimg3 { 
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(https://img.icons8.com/nolan/64/heart-border.png);
            border-image-repeat: round;
            border-image-slice: 30;
            border-image-width: 30px;
         }
      </style>
   </head>

   <body>
      <p id = "borderimg1">Ini adalah contoh border image.</p>
      <p id = "borderimg2">Ini adalah contoh border image.</p>
      <p id = "borderimg3">Ini adalah contoh border image.</p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Semoga tutorial ini bisa membantu Anda mempelajari cara menggunakan border image di CSS untuk mendesain border di dokumen HTML.

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama Anda di sini

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.