Nov 3, 2008

Jenis² Border

Terasa rindu pula dengan blog ini setelah beberapa hari tidak mencoret sebarang topik di sini. Kali ini penulis kembali dengan topik yang penulis kira menarik untuk dikongsi bersama sahabat² yang lain. Selain itu, topik kali ini adalah untuk rujukan penulis sendiri. Topik ini adalah berkaitan dengan border.

Jenis² border yang ada ialah :-

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


Berikut ialah contoh² setiap border yang dinyatakan di atas.

Border Dotted

Kod
<div style="border-width: 2px; border-style: dotted; border-color: red; ">
Border Dotted
</div>

Hasil
Border Dotted

Border Dashed

Kod
<div style="border-width: 2px; border-style: dashed; border-color: red; ">
Border Dotted
</div>

Hasil
Border Dashed

Border Solid

Kod
<div style="border-width: 2px; border-style: solid; border-color: red; ">
Border Solid
</div>

Hasil
Border Solid

Border Double

Kod
<div style="border-width: 4px; border-style: double; border-color: red; ">
Border Double
</div>

Hasil
Border Double

Border Groove

Kod
<div style="border-width: 4px; border-style: groove; border-color: red; ">
Border Groove
</div>

Hasil
Border Groove

Border Ridge

Kod
<div style="border-width: 4px; border-style: ridge; border-color: red; ">
Border Ridge
</div>

Hasil
Border Ridge

Border Inset

Kod
<div style="border-width: 4px; border-style: inset; border-color: red; ">
Border Groove
</div>

Hasil
Border Inset

Border Outset

Kod
<div style="border-width: 4px; border-style: outset; border-color: red; ">
Border Groove
</div>

Hasil
Border Outset


Border² tersebut boleh diringkaskan kodnya seperti berikut :-
border-width: 4px; border-style: double; border-color: #f00;
boleh disingkatkan menjadi
border 4px; double; #f00;

2px dan 4px pula merujuk kepada ketebalan border.

Jika mahu menambahkan border pada template, pilih Edit HTML dan letakkan kod border diantara kod { dan kod }, contohnya :

.blog-author-comment p{
border:2px solid #336699;}

Sumber : Jovieblog

7 Comment

jovieblog Tue Nov 04, 01:01:00 AM

Thanks for translated in Malaysian Language....

Salam Sukses...

Marzuki Tue Nov 04, 06:11:00 PM

apsal xeksportkandungan blog ni ke blog baru pastu tutup blog ni. mcm yg bm buat

Eriyza Wed Nov 05, 01:25:00 PM

Jovie, sama².

Marzuki, dah eksport topik blog ni ke WP tapi gambo dok tubik, pastuh koding tutorial seme beterabur. Camno nak ejas?? :)

Anonymous

a good tutorial!

Eriyza Sun Jul 26, 01:49:00 PM

Anonymous : Tq. :)

jabamal Fri Aug 21, 08:29:00 PM

Salam Kak Eriyza,

saya nak tanya, akak tahu tak macamana nak masukkan table yg kita boleh masukkan foto dan maklumat diri mcm contoh web ini kedlm blog.

http://www.pemudaumno.org.my/modules.php?name=Content&pa=showpage&pid=140

Eriyza Fri Aug 21, 11:01:00 PM

jabamal : Dorang guna table kot tp sy kurang mahir guna table.

Post a Comment

Gunakan tatabahasa yang betul sewaktu menulis komentar agar mudah difahami oleh penulis. Terima kasih. :-)

Sila ambil perhatian perkara² berikut :-

1. Tinggalkan nama dan url blog atau laman web anda.
2. HTML tag seperti <b>, <i>, <a> boleh digunakan.
3. Sila berhemah di dalam berbahasa.