CSS Border Style

border style 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 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

 

 

Keterangan :

  • border:5px adalah tebal dari border.
  • #08088A adalah kode untuk warna biru, selengkpnya bisa dilihat disini.
  • width:500px adalah lebar dari kotak.
  • padding:20px adalah jarak antara tulisan dengan border.
  • background:#FFF adalah warna latar.

 

Semoga bermanfaat.

 

Berlangganan artikel terbaru via Email
Artikel Lainnya :

7 comments

3 April 2010 00.25

Wahhh... keren nich... Simpan dulu ahhh...

Thanks kawand...

3 April 2010 08.09

boleh ctrl+d dl sob..
memang menarik sobat..

3 April 2010 14.53

@ riz : silahkan di bookmark sob, thanks..

19 April 2010 09.10

tambah frame, tambah cantik view blog...

7 November 2010 20.18

Oke deh...
dapet ilmu baru deh,
thx ya :D

5 Desember 2010 14.06

Mumet ah, saya gak mudeng-mudeng ini , he he he... selamat jadi orang pintar ya?

Thanks templatenya sudah saya pakai di http://ejakulasi-dini.blogspot.com/

Anonim
15 Desember 2010 10.22

dr blog2 yg pnh sy sdh bc blog boss miscah lbh keren..mantab&lbh ringan klo di bk g lemot..
blog profesional..keren
succes sll pak

Poskan Komentar

Reader Community

Recent Comments