Border Blog

MEMBUAT BORDER DI BLOGGER

Border biasa digunakan untuk menandai suatu kalimat yang dianggap penting di dalam postingan, atau dipakai sebagai pembatas antara satu sub dengan sub lain. Didalam membuat border, terutama untuk di blog, akan lebih mudah bila menggunakan kode CSS (Casscading Style Sheets)…Border sendiri ada beberapa type, diantaranya tipe solid dan dot… sebagai contoh coba lihat kode dibawah ini.

<div style="width:200px;height:100px;border:1px solid blue;">Teks anda dengan border solid</div>

Hasil dari kode diatas adalah seperti terlampir di bawah ini

Teks anda dengan border solid

Penjelasan :
Untuk border yang perlu diperhatikan adalah kode stylenya, dimana untuk kode diatas bisa diartikan sebagai border solid berwarna biru dengan ukuran 1 pixel …border:1px solid blue;….dan juga mempunyai tinggi 100 pixel dan lebar 200 pixel….width:200px; height:100px;...Selanjutnya kita akan melihat style border yang lain….

Style Border Dot

<div style="width:200px;height:100px;border:2px dotted blue;">Teks dengan border dot</div>

Hasilnya

Teks dengan border dot

Coba perhatikan perbedaanya, antara border solid dan border dot…. Yup cuman ganti nama aja dari solid menjadi dot… begitu juga untuk tipe lainnya tinggal liat perbedaanya sajah yach….

Style Border dash
<div style="width:200px;height:100px;border:2px dashed blue;">Teks dengan border dash</div>

Hasilnya

Teks dengan border dash

Outset Border

<div style="width:200px;height:100px;border:2px outset blue;">Teks dengan Outset Border</div>

hasilnya

Teks dengan border Outset

Inset Border

<div style="width:200px;height:100px;border:2px inset blue;">Teks dengan border Inset</div>

hasilnya

Teks dengan border Inset

Double border

<div style="width:200px;height:100px;border:2px double blue;padding:2px;">Teks dengan border double</div>

hasilnya

Teks dengan border double

Multiple border

<div style="width:200px;height:100px;border-width:6px;border-color:blue;border-style:dotted dashed solid double;">Teks dengan burder yang multiple</div>

Hasilnya

Teks dengan burder yang multiple

Tambahan untuk pertanyaan di bawah border mengenai border emboss dengan gradasi warna... untuk hal tersebut bisa digunakan style border ridge contohnya dibawah
Border Ridge

Border Ridge kalau diperhatikan secara seksama hampir seperti bentuk Emboss (3d), kodenya...

<div style="BORDER: 5px ridge yellow; width:350px;">border ridge</div>

hasil dari kode diatas adalah

border ridge

Border ridge dengan gradasi warna yang beragam
Border ridge sendiri bila digabungkan dengan berbagai warna akan terbentuk seperti gradasi warna... kodenya...

<div style="BORDER: 5px ridge; border-color:#FF3300 #00FF00 #0000FF #FFFF00; width:350px;"></div></textarea>

hasilnya

border ridge dengan gradasi warna

beresss.....