> Warung Bebas

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 ...

Ditulis oleh: Arya Dharma - Sabtu, 12 Mei 2012

4 komentar untuk "Cara Membuat Border Di Postingan Blog"

  1. Nice Info, mas... Saya sedang mencari-cari tutorial ini. Mohon izin untuk diaplikasikan ke postingan saya ya... Terimakasih mas, untuk pembelajarannya... Salam ^_^

    BalasHapus
  2. damn !!! pke apa lu ? perasaan di google kemaren di page 2 skrg di page one urutan ke 3 :/

    BalasHapus