Beragam Macam Border Teks dengan CSS Style Border

Sabtu, September 28, 2013

Belajar css memang sangat menyenangkan, kali ini saya coba berikan sedikit tips dalam membuat border blog. Mungkin ada yang belum mengetahui ragam atau jenis border, padahal ada banyak jenis border yang bisa di gunakan untuk mempercantik tulisan atau blog. Dibawah ini ada beberapa daftar jenis border yang bisa sobat gunakan untuk mengganti border sidebar atau main post blog.yang bisa sobat gunakan untuk mengganti border sidebar atau main post blog.

border-style: dotted border-style: solid border-style: groove border-style: inset

border-style: dashed border-style: double border-style: ridge border-style: outset

Berikut ini contoh dari border yang bisa sobat gunakan :

Border-style: dotted

<div style="border:5px dotted #08088A; background:#FFF; width:500px; padding:20px">


dotted dotted dotted dotted dotted


</div>

dotted dotted dotted dotted dotted

Border-style: solid

<div style="border:5px solid #08088A; background:#FFF; width:500px; padding:20px">


solid solid solid solid solid


</div>

solid solid solid solid solid

Border-style: dashed

<div style="border:5px dashed #08088A; background:#FFF; width:500px; padding:20px">


dashed dashed dashed dashed dashed


</div>

dashed dashed dashed dashed dashed

Border-style: groove

<div style="border:5px groove #08088A; background:#FFF; width:500px; padding:20px">


groove groove groove groove groove


</div>

groove groove groove groove groove

Border-style: double

<div style="border:5px double #08088A; background:#FFF; width:500px; padding:20px">


double double double double double


</div>

double double double double double

Border-style: inset

<div style="border:5px inset #08088A; background:#FFF; width:500px; padding:20px">


inset inset inset inset inset


</div>

inset inset inset inset inset

Border-style: outset

<div style="border:5px outset #08088A; background:#FFF; width:500px; padding:20px">


outset outset outset outset outset


</div>

outset outset outset outset outset

Border-style: ridge

<div style="border:5px ridge #08088A; background:#FFF; width:500px; padding:20px">


ridge ridge ridge ridge ridge


</div>

ridge ridge ridge ridge ridge

Border Campur Aduk

<div  style="border-style:dotted dashed double outset; border-color:red
orange blue purple; border-width:5px; background:#FFF; width:500px;
padding:20px">


dotted dashed double outset


</div>

dotted dashed double outset

Bagaimana Gan Keren Nggak hehe,Kalau Masih Belum Ngerti Silahkan Tanya Di Form Komentar Dan Selamat Bermalam Minggu :D

Buruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.

Buruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.