Cara Membuat Border Blog

Border memang sangat banyak gunanya, selain sebagai pembatas border juga digunakan untuk memperindah tampilan blog anda sehingga para pengunjungpun betah berlama-lama dengan blog anda. Ok langsung saja cara membuat border

 NB:

• warna hitam adalah isi dari border, ubah sesuai keinginan.
• ketebalan garis luar border = solid / double / dashed .. dll... ubah sendiri tebal tipisnya.
• background: #FFDEAD itu adalah warna background pink dibelakang tulisan
• color:white, warna pada tulisan. Tapi dalam contoh warnannya saya ganti hitam untuk memperjelas yang membaca.
• padding:20px adalah jarak antara tulisan dengan border.

Berikut contoh dan scriptnya . . . 

MACAM BUORDER

<div style="border: 10px double blue;">MACAM BUORDER</div>

MACAM BUORDER

<div style="border: 10px solid blue;">MACAM BUORDER</div>

MACAM BUORDER

<div style="border: 10px groove red;">MACAM BUORDER</div>

MACAM BUORDER

<div style="border: 10px outset red;">MACAM BUORDER</div>

MACAM BUORDER

<div style="border: 10px ridge green;">MACAM BUORDER</div>

whOyO-WHOYO joZz, macam border

<p style="border: solid 10px #FFA07A; background: #FFDEAD; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px">whOyO-WHOYO joZz, macam border</p>

whOyO-WHOYO joZz, macam border

<p style="border: solid 10px #FFA07A; background: #FFDEAD; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px">whOyO-WHOYO joZz, macam border</p>

whOyO-WHOYO joZz, macam border

<p style="border: dashed 5px  #FFA07A; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #FFDEAD; font-size: 18px">whOyO-WHOYO joZz, macam border</p>

whOyO-WHOYO joZz, macam border

<p style="border: dashed 5px #FFA07A; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #FFDEAD; font-size: 18px"><blink>whOyO-WHOYO joZz, macam border</blink></p>

hopefully help . . .  

source :http://ada-gratis.blogspot.com