Cara Membuat Bingkai Garis Dengan Background Warna

Dalam postingan blog untuk mempertegas atau memberi variasi pada suatu tulisan yang dianggap penting kita bisa menggunakan huruf tebal, miring, atau garis bawah. Namun bisa juga kita tambahkan bingkai sederhana pada tulisan tersebut. Untuk membuat bingkai garis dengan background warna cara-caranya seperti dibawah ini.

Ada beberapa jenis bingkai yang tersedia, bersama dengan contoh dan kode script nya, anda tinggal copas ke postingan atau bisa juga edit html java script.

1. Solid

Kode nya : 
<div style="border: 1px solid #000000; background-color:#BFF2FE; padding: 5px; width: auto;">
Tulisan,gambar,maupun kode script
</div>

2. Dotted

Kode nya :  
<div style="border: 1px dotted #000000; background-color:#BFF2FE; padding: 5px; width: auto;">
Tulisan,gambar,maupun kode script
</div>

3. Dashed

Kode nya :  
<div style="border: 1px dashed #000000; background-color:#BFF2FE; padding: 5px; width: auto;">
Tulisan,gambar,maupun kode script
</div>

4. Double

Kode nya : 
<div style="border: 4px double #000000; background-color:#BFF2FE; padding: 5px; width: auto;">
Tulisan,gambar,maupun kode script
</div>

5. Groove

Kode nya :
 <div style="border: 4px groove #000000; background-color:#BFF2FE; padding: 5px; width: auto;">
Tulisan,gambar,maupun kode script
</div>

6. Ridge

Kode nya: 
<div style="border: 4px ridge #000000; background-color:#BFF2FE; padding: 5px; width: 400px;">
Tulisan,gambar,maupun kode script
</div> 

7. Inset

Kode nya: 
<div style="border: 4px inset #000000; background-color:#BFF2FE; padding: 5px; width: auto;">
Tulisan,gambar,maupun kode script
</div>

8. Outset

Kode nya: 
<div style="border: 4px outset #000000; background-color:#BFF2FE; padding: 5px; width: auto;">
Tulisan,gambar,maupun kode script
</div>

Cara Merubahnya :

⇨background-color: #BFF2FE ganti kode warna jika anda ingin warna yang lain, untuk mencari kode warna sesuai keinginan anda silakan klik di sini

⇨width: auto untuk lebar bingkai, bisa anda ubah sesuai kebutuhan bisa 400px, 500px dll. Bisa juga dengan auto karena bingkai akan menyesuaikan dengan lebar halaman yang di tempati.

⇨Tulisan,gambar,maupun kode script di sini tempat anda menyisipkan tulisan, gambar maupun kode script. 

Demikian Cara Membuat Bingkai Garis Dengan Background Warna di posting blog, semoga bisa bermanfaat.