Sunday, May 24, 2009

Membuar Border Style dengan CSS

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.




  • 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 macam style border yang paling diminati :


Border-style: dotted

Scriptnya :





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

Tulisan Sobat di sini

</div>

 Preview:


Tulisan Sobat di sini

Border-style: solid

Scriptnya :



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

Tulisan Sobat di sini

</div>

 
Preview  :


Tulisan Sobat di sini
Border-style: dashed

Scriptnya :



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

Tulisan Sobat di sini

</div>

Preview :

Tulisan Sobat di sini

 

Border-style: groove

Scriptnya :



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

Text Sobat Di Sini

</div>

 preview  :

Text Sobat Di Sini

Border-style: double

Scriptnya :



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

Text Sobat Di Sini

</div>
 
 preview  :

Text Sobat Di Sini

Border-style: inset

Scriptnya :





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

Text Sobat Di Sini

</div>
 Preview  :



Text Sobat Di Sini



Border-style: outset

Scriptnya :





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

Text Sobat Di Sini

</div>
 
 Preview  :

Text Sobat Di Sini

 
Border-style: ridge

Script  :






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

Text Sobat Di Sini

</div>

 Preview  :



Text Sobat Di Sini




Border Mix 
Scriptnya :





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

Text Sobat Di Sini

</div>


Preview  :



Text Sobat Di Sini

Note   :




  • border:5px adalah tebal dari border.

  • #08088A adalah kode untuk warna biru

  • width:500px adalah lebar dari kotak.

  • padding:20px adalah jarak antara tulisan dengan border.

  • background:#FFF adalah warna latar.

-Selamat Mencoba -

No comments:

Post a Comment