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
-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>
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
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>
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
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>
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
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
- border
- border-top
- border-right
- border-left
- border-bottom
- Solid
- Double
- Dotted
- Dashed
- Inset
- Outset
- Groove
- Ridge
- Angka (panjang) dalam pixel (px), contoh: (1px,2px,3px,dan seterusnya)
- Medium
- 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.
terima kasih
ReplyDeletesangat bermanfaat
yuhuuu..bermanfaat sekali
ReplyDeletepembersih mata solder