Apakah kalian pernah melihat tulisan atau elemen disidebar blog orang lain yang dibubuhi hiasan berupa bingkai di tepinya, bahkan pada sebagian lainnya juga ada yang dihiasi berupa gambar belakang atau background sebagai latar belakang penulisannya.

Dan pada postingan saya kali ini saya akan membahas tentang penggunaan style border atau bingkai pada blog, sekaligus kita juga memperoleh pengetahuan tentang Jenis-jenis Style Border

Pada umumnya jenis style border yang sering digunakan oleh para blogger ada 5 macam tampilan, yaitu sebagai berikut :

1. Border Tipe Dotted
   
   
   Border Dotted
   
   
   [ Kode Border Dotted]
   <div style="background-color: #f2f2f2; background-image: none; border: 2px dotted #000000; color: blue; padding: 2px;">
   Border Dotted</div>
   
   
2. Border Tipe Dashed
   
   
   Border Dashed
   
   
   [ Kode Border Dashed ]
   <div style="background-color: #f2f2f2; background-image: none; border: 2px dashed #000000; color: blue; padding: 5px;">
   Border Dashed</div>
   
   
3. Border Tipe Double
   
   
   Border Double
   
   
   [ Kode Border Double ]
   <div style="background-color: #f2f2f2; border: 3px double #000000; color: blue; padding: 5px;">
   Border Double</div>
   
   
4. Border Type Solid
   
   
   Border Solid
   
   
   [ Kode Border Double ]
   <div style="background-color: #f2f2f2; background-image: none; border: 2px solid red; color: blue; padding: 5px;">
   Border Solid</div>
   
   
5. Border Tipe Groove
   
   
   Border Groove
   
   
   [ Kode Border Groove ]
   <div style="border: 3px groove rgb(0, 0, 0); padding: 5px; background-color: rgb(242, 242, 242); background-image: none; color: blue">Border Groove</div>
   
   
6. Border Tipe Ridge
   
   
   Border Ridge
   
   
   [ Kode Border Ridge ]
   <div style="background-color: #f2f2f2; background-image: none; border: 2px ridge #000000; color: blue; padding: 5px;">
   Border Ridge</div>
   
   
7. Border Tipe Inset
   
   
   Border Inset
   
   
   [ Kode Border Inset ]
   <div style="background-color: #f2f2f2; background-image: none; border: 2px inset #000000; color: blue; padding: 5px;">
   Border Inset</div>
   
   
8. Border Tipe Outset
   
   
   Border Outset
   
   
   [ Kode Border Outset ]
   <div style="border: 2px outset rgb #000000; padding: 5px; background-color: #f2f2f2; background-image: none; color: blue;">Border Outset</div>

Tambahan : untuk mengganti background area tersebut dengan gambar/image, kalian hanya cukup mengganti kode background-color: #f2f2f2; , gantilah kode tersebut dengan kode dibawah ini :

background: url(http://gambarku.png);

Ganti url gambar (text warna merah) dengan url gambar milik kalian...

Nah mungkin cukup sekian pengenalan jenis-jenis style border dari saya. Apabila masih bingung silahkan berkomentar...semoga bermanfat...;)