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

0
35

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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.