-->

7/28/2010

Belajar Berkreasi dengan CSS Border Style



Gambar apakah yang saya tampilkan diatas....???

Yap, jawabannya adalah Border......!!!!


Pada Kesempatan kali ini, kita akan mencoba membahas masalah border CSS. Dengan menggunakan border, kita bisa mempercantik halaman blog. Dengan border pula, kita bisa membuat tampilan blog kita menjadi lebih rapi. Saat kita ingin membuat border/garis pinggir dengan menggunakan kertas, mungkin bukanlah sesuatu hal yang sulit. Tapi..... saat kita ingin membuat border CSS...?? Apakah anda mengalami kesulitan.....??!!

Beberapa tipe border yang biasa kita gunakan :

  • border-style: dotted
  • border-style: solid
  • border-style: groove
  • border-style: inset
  • border-style: dashed
  • border-style: double
  • border-style: ridge
  • border-style: outset

Untuk lebih memahami masalah border CSS ini, mari kita bahas satu persatu tipe-tipe border beserta contohnya.


Border-style: dotted

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

Dengan menggunakan tipe border ini akan menghasilkan border dotted alias titik-titik

</div>

Dengan menggunakan tipe border ini akan menghasilkan border dotted alias titik-titik


Border-style: solid

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

Dengan menggunakan tipe border ini akan menghasilkan border garis lurus tanpa putus

</div>

Dengan menggunakan tipe border ini akan menghasilkan border garis lurus tanpa putus


Border-style: dashed

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

Dengan menggunakan tipe border ini akan menghasilkan border garis putus-putus

</div>

Dengan menggunakan tipe border ini akan menghasilkan border garis putus-putus


Border-style: groove

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

Dengan menggunakan tipe border ini akan menghasilkan border groove alias sedikit timbul

</div>

Dengan menggunakan tipe border ini akan menghasilkan border groove alias sedikit timbul


Border-style: double

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

Dengan menggunakan tipe border ini akan menghasilkan border dua garis lurus

</div>

Dengan menggunakan tipe border ini akan menghasilkan border dua garis lurus


Border-style: inset

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

Dengan menggunakan tipe border ini akan menghasilkan border garis lurus inset

</div>

Dengan menggunakan tipe border ini akan menghasilkan border garis lurus inset


Border-style: outset

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

Dengan menggunakan tipe border ini akan menghasilkan border garis lurus outset

</div>

Dengan menggunakan tipe border ini akan menghasilkan border garis lurus outset


Border-style: ridge

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

Dengan menggunakan tipe border ini akan menghasilkan border garis ridge

</div>

Dengan menggunakan tipe border ini akan menghasilkan border garis 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">

Border campuran Coba-coba

</div>

Border campuran
Coba-coba

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.


2 komentar:

anam mengatakan...

mantaaaaap postingannya!

Unknown mengatakan...

mantab, agak susah juga ya kalau mau dihapalin, salam kenal dari cream pemutih wajah

Posting Komentar

Related Posts Plugin for WordPress, Blogger...