Fungsi Border, Jenis dan Contohnya

Disini kita akan membahas tentang fungsi border, jenis dan contohnya pada html script dan juga contohnya. Border adalah salah satu property yang dimiliki CSS (Cascading Style Sheet), salah satu kode yang mengarah pada bidang, box , html, yang memiliki fungsi untuk memberi batas atau garis seperti pada bidang box/html. Batas atau garis ini bisa kita tentukan/edit sendiri sesuai dengan selera kita, diantaranya bentuk/tampilan/style seperti warna, ketebalan serta juga gaya/style border itu sendiri.

Jenis - jenis border antara lain adalah :

• Border-Color
• Border-Width
• Border-Style

Berikut contoh kodenya :

-Contoh kode 1
border-style:solid
 

<div style="background-color:green;width:300px;border-style:solid;border-color:red;border-width:5px;">
C O N T O H
I S I / T E K S
A N D A
</div>

Maka tampilan out put akan seperti dibawah ini :

C O N T O H
I S I / T E K S
A N D A

-Contoh kode 2
border-style:double

<div style="background-color:green;width:300px;border-style:double;border-color:yellow;border-width:5px;">
C O N T O H
I S I / T E K S
A N D A
</div>

Maka tampilan out put nya akan seperti dibawah ini :

C O N T O H
I S I / T E K S
A N D A

-Contoh kode 3
border-style:dotted

<div style="background-color:green;width:300px;border-style:dotted;border-color:#00ff00;border-width:7px;">
C O N T O H
I S I / T E K S
A N D A
</div>

Maka tampilan out put nya akan seperti dibawah ini :

C O N T O H
I S I / T E K S
A N D A

Untuk contoh kode 3 tidak disarankan bagi para pemula, karena kita harus menulis bagian-bagian properti nya satu persatu.

Diantara jenis - jenis border diatas masih ada lagi bagian properti dari jenis border tersebut yang masih akan kita bahas, berikut penjelasannya.

Untuk macam - macam contoh kode dan tampilan out put berikut nya silahkan klik disini  Fungsi border, jenis dan contoh nya V.2

Jenis - jenis Properti Border : 

• border-top-style
• border-top-width
• border-top-color
• border-right-style
• border-right-width
• border-right-color
• border-left-style
• border-left-width
• border-left-color
• border-bottom-style
• border-bottom-width
• border-bottom-color

Jenis - jenis Properti Border Shorthand :

• border
• border-top
• border-right
• border-left
• border-bottom

Jenis - jenis Nilai atau Value Pada Border-Style

• Solid
• Double
• Dotted
• Dashed
• Inset
• Outset
• Groove
• Ridge

Jenis - jenis Nilai Value Border-Width

• Angka (panjang) dalam pixel (px), contoh: (1px,2px,3px,dan seterusnya)
• Medium

Jenis - jenis Nilai Value Border Color

• Black, Red, Blue, Green, Pink, dan sebagainya
• Hex Color
• Rgb Color 

Untuk contoh kode dan out put dari penjelasan diatas silahkan klik disini .

Terima kasih telah berkunjung ke blog saya, mudah - mudahan anda tidak menemukan kesulitan dalam memahami artikel tentang fungsi border, jenis dan contohnya.

Terima Kasih.