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