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.