Cara Membuat Border Di Postingan Blog

Border Sangat Penting Untuk Penulisan HTML kode Pada Postingan,, nah. Berikut Ini Saya akan Memposting "Cara Membuat Border Di Postingan" Silahkan simak Artikel nya Dibawah ini :

1. Border Style Solid

<div style="border: 2px solid red; height: 20px; padding: 5px; text-align: left; width: 200px;">
Border Style Solid</div>

Maka hasilnya seperti di bawah ini.

Border Style Solid

border: 2px solid red; menunjukkan ketebalan tepi border sebesar 2 piksel dan bergaya solid dengan warna merah (red). Bila ingin lebih tebal lagi, silakan ganti angka 2 dengan angka yang lebih besar lagi. Kalau mau ganti warna, silakan ganti kata red dengan warna yang lain, misalnya blue untuk biru, dan lain sebagainya.
height: 20px; menunjukkan tinggi border sebesar 20 piksel. Bila ingin lebih tinggi lagi, silakan ubah angka 20 dengan angka yang lebih tinggi lagi nilainya.
padding: 5px; menunjukkan jarak antara tulisan dengan tepi border sebesar 5 piksel. Jika ingin diubah, silakan diganti angkanya. Makin besar angkanya makin renggang jaraknya.
text-align: left; menunjukkan perataan tulisan. Left untuk rata kiri, right untuk rata kanan, center untuk rata tengah, justify untuk rata kanan kiri.
width: 200px; menunjukkan lebar border sebesar 200 piksel. Jika ingin lebih lebar lagi, silakan diganti angka 200 dengan angka yang lebih tinggi lagi nilainya.

Border Style Dot

<div style="border: 2px dotted green; height: 20px; padding: 5px; text-align: center; width: 200px;">
Border Style Dot</div>

Maka hasilnya seperti di bawah ini.

Border Style Dot

Selain dua jenis border di atas masih ada lagi beberapa tipe border yang lainnya. Berikut ini beberapa style border yang lainnya.

Border Style Dash

<div style="border: 2px dashed blue; height: 20px; padding: 5px; text-align: right; width: 200px;">
Border Style Dash</div>

Maka hasilnya seperti di bawah ini.

Border Style Dash

Border Style Outset

<div style="border: 2px outset yellow; height: 20px; padding: 5px; text-align: left; width: 200px;">
Border Style Outset</div>

Maka hasilnya seperti di bawah ini.

Border Style Outset

Border Style Inset

<div style="border: 2px inset yellow; height: 20px; padding: 5px; text-align: right; width: 200px;">
Border Style Inset</div>

Maka hasilnya seperti di bawah ini.

Border Style Inset

Border Style Double

<div style="border: 5px double green; height: 20px; padding: 5px; text-align: center; width: 200px;">
Border Style Double</div>

Maka hasilnya seperti di bawah ini.

Border Style Double

Border Style Multiple

<div style="border-color: purple; border-style: dotted dashed solid double; border-width: 6px; height: 20px; padding: 5px; text-align: center; width: 200px;">Border Style Multiple</div>

Maka hasilnya seperti di bawah ini.

Border Style Multiple

Border Style Ridge

<div style="border: 10px ridge red; height: 20px; padding: 5px; text-align: left; width: 200px;">
Border Style Ridge</div>

Maka hasilnya seperti di bawah ini.

Border Style Ridge

Sumber: postingan

Cara Membuat Border Di Postingan Blog 9 Out Of 10 Based On 10 Ratings. 9 User Reviews.

Share 'Cara Membuat Border Di Postingan Blog' On ...

Anda baru saja membaca artikel yang berkategori Tutorial dengan judul Cara Membuat Border Di Postingan Blog. Anda bisa bookmark halaman ini dengan URL http://arya96.blogspot.com/2012/05/cara-membuat-border-di-postingan-blog.html. Terima kasih!

Ditulis oleh: Arya Dharma - Sabtu, 12 Mei 2012