TRISNO MARSA
1. Border Style Solid
<div
style="border: 2px solid red; height: 20px; padding: 5px; text-align: left; width: 200px;">
Border Style Solid</div>
Border Style Solid
Maka hasilnya seperti di bawah ini.
Border Style Solid
•
• border: 2px solid red; menunjukkan ketebalan tepi border sebesar 2 piksel dan bergaya solid dengan warna merah (red). Bila ingin lebih tebal lagi, silakan ganti angka 2 dengan angka yang lebih besar lagi. Kalau mau ganti warna, silakan ganti kata red dengan warna yang lain, misalnya blue untuk biru, dan lain sebagainya.
• height: 20px; menunjukkan tinggi border sebesar 20 piksel. Bila ingin lebih tinggi lagi, silakan ubah angka 20 dengan angka yang lebih tinggi lagi nilainya.
• padding: 5px; menunjukkan jarak antara tulisan dengan tepi border sebesar 5 piksel. Jika ingin diubah, silakan diganti angkanya. Makin besar angkanya makin renggang jaraknya.
• text-align: left; menunjukkan perataan tulisan. Left untuk rata kiri, right untuk rata kanan, center untuk rata tengah, justify untuk rata kanan kiri.
• width: 200px; menunjukkan lebar border sebesar 200 piksel. Jika ingin lebih lebar lagi, silakan diganti angka 200 dengan angka yang lebih tinggi lagi nilainya.
Border Style Dot
<div
style="border: 2px dotted green; height: 20px; padding: 5px; text-align: center; width: 200px;">
Border Style Dot</div>
Border Style Dot
Maka hasilnya seperti di bawah ini.
Border Style Dot
Selain dua jenis border di atas masih ada lagi beberapa tipe border yang lainnya. Berikut ini beberapa style border yang lainnya.
Border Style Dash
<div
style="border: 2px dashed blue; height: 20px; padding: 5px; text-align: right; width: 200px;">
Border Style Dash</div>
Border Style Dash
Maka hasilnya seperti di bawah ini.
Border Style Dash
Border Style Outset
<div
style="border: 2px outset yellow; height: 20px; padding: 5px; text-align: left; width: 200px;">
Border Style Outset</div>
Border Style Outset
Maka hasilnya seperti di bawah ini.
Border Style Outset
Border Style Inset
<div
style="border: 2px inset yellow; height: 20px; padding: 5px; text-align: right; width: 200px;">
Border Style Inset</div>
Border Style Inset
Maka hasilnya seperti di bawah ini.
Border Style Inset
Border Style Double
<div
style="border: 5px double green; height: 20px; padding: 5px; text-align: center; width: 200px;">
Border Style Double</div>
Border Style Double
Maka hasilnya seperti di bawah ini.
Border Style Double
Border Style Multiple
Border Style Multiple
BORDER POSTINGAN
Maka hasilnya seperti di bawah ini.
Border Style Multiple
Border Style Ridge
<div style="border: 10px ridge red; height: 20px; padding: 5px; text-align: left; width: 200px;">
Border Style Ridge</div>
Border Style Ridge
Maka hasilnya seperti di bawah ini.
Border Style Ridge
<div style="border: 10px
ridge red; height: 20px; padding: 5px;
text-align: left; width: 200px;">
BAGUS</div>
BAGUS