STATUS UPDATED!
FEEL FREE TO ASK~
Tutorial Blog ^_^: TUTORIAL: JENIS-JENIS LINE BORDER

Sekiranya anda berminat untuk membaca artikel Islam, info semasa, kisah nabi, kisah pengajaran dan lain-lain, bolehlah pergi ke Khaleefah Allah ^_^ Followlah blog ini dan blog itu sekiranya berbaloi untuk difollow. Sebarang ulasan adalah amat amat amat amat diharapkan.
Any Requests or Questions?

Jom, tukar link~

TUTORIAL: JENIS-JENIS LINE BORDER

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;}


Semoga Beroleh Manfaat... 

::23 Jamadil Awal 1431H::

 

0 comments:

Berkatalah dengan akal dan jiwa, kerana itu anugerah Pencipta dan ternyata natijahnya akan lebih bahagia. ^_^

Post a Comment

 
Copyright © 2009-2017 Tutorial Blog ^_^: TUTORIAL: JENIS-JENIS LINE BORDER
Design by a.a.ghariib