Cara Menggunakan border-image Dengan CSS dan langkahnya

Tahukah kalian, bahwa dengan css kita bisa membuat banyak kreasi layout atau tampilan website sesuai yang kita inginkan. Kali ini saya akan memberikan tips dan trik, bagaimana Cara Menggunakan border-image Dengan CSS. Fungsi ini kita bisa implementasikan pada latihan kali ini,

Bisa teman-teman lihat pada gambar di atas ini, kita akan membuat persis seperti gambar di atas ini dengan memberikan border-image sehinga menghasilkan output seperti bingkai foto. Baik langsung saja kita praktekkan Cara Menggunakan border-image Dengan CSS, seperti biasa teman-teman siapkan text editor nya dan copy script html nya di bawah ini

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div class="content">
    <div class="content1">
	<img src="raisa.PNG">
    </div>
  </div>
</body>
</html>

Kemudian pastekan pada text editornya dan save dengan index.html lalu jalankan pada browser nya, maka hasilnya seperti gambar di bawah ini

Nah hasilnya seperti gambar di atas ini, untuk gambar teman-teman bebas menggunakan gambar apa saja sesuai kesukaan kalian. Langkah berikutnya kita berikan style css nya, tambahkan script di bawah ini

<style type="text/css">
		*{padding: 0; margin: 0}
		.content{
			width: 360px;
			height: 500px;
			border: 21px solid gray;
			padding: 5px;
			margin: auto
		}
		img{
			width: 100%;
			height: 500px;
		}
	</style>

Kemudian save dan refresh pada browser nya, maka hasilnya seperti gambar di bawah ini

Output diatas saya berikan type border: dashed dan warna gray supaya tampak hasilnya, kemudian langkah berikutnya kita akan memberikan border-image pada class content sebelum memberikan border-image siapkan terlebih dahulu image nya. Saya memberikan image bunga,

Kemudian baru kita akan berikan boder-imange nya dengan cara seperti gambar di bawah ini

Teman-teman tambahkan seperti gambar di atas ini yang saya beri kotak warna merah, panggil image dan tambahkan size nya disini saya berikan size nya 39 dan ditambahkan round agar hasilnya seperti gambar bingkai di atas. Jika sudah, save dan refresh pada browser nya. Maka border-image berhasil di jalankan

Baik, sekian dulu pada tutorial Dumet School kali ini tentang Cara Menggunakan border-image Dengan CSS kita berjumpa lagi pada artikel berikutnya. Semoga bermanfaat dan menjadi refrensi untuk kalian yang sedang belajar html dan css nya. Terima Kasih dan Sampai Jumpa.

🙂

Baca juga artikel tentang Cara Mendeteksi CSS Jika Tidak Terhubung Dengan HTML

Cara Menggunakan border-image Dengan CSS

Kategori