Setelah sebelumnya admin membahas mengenai Cara Membuat Tabel di Posting Blog. Maka kali ini admin akan share Cara Membuat Variasi Garis Kotak/Border di Posting Blog sebenarnya sudah banyak yang membahas tentang topik ini namun tidak ada salahnya jika admin membahas ulang sekalian untuk belajar kembali dan mengingat ketika nanti dibutuhkan dan untuk melengkapi koleksi artikel. Pada artikel ini, sebenarnya hanya kostumisasi bentuk garis/border dari suatu tabel. So mari kita simak ya.
1. Solid Border
Kode: <div style="background: #0000; border: 5px solid red; color: black; font-size: 30px; padding: 10px; text-align: center; width: 300px;">Garis Kotak Solid</div>
Garis Kotak Solid
2. Double Border
Kode: <div style="background: #0000; border: 5px double red; color: black; font-size: 30px; padding: 10px; text-align: center; width: 300px;">Garis Kotak Double</div>
Garis Kotak Double
3. Groove Border
Kode: <div style="background: #0000; border: 5px groove red; color: black; font-size: 30px; padding: 10px; text-align: center; width: 300px;">Garis Kotak Groove</div>
Garis Kotak Groove
4. Ridge Border
Kode: <div style="background: #0000; border: 5px ridge red; color: black; font-size: 30px; padding: 10px; text-align: center; width: 300px;">Garis Kotak Ridge</div>
Garis Kotak Ridge
5. Dotted Border
Kode: <div style="background: #0000; border: 5px dotted red; color: black; font-size: 30px; padding: 10px; text-align: center; width: 300px;">Garis Kotak Dotted</div>
Garis Kotak Dotted
6. Dashed Border
Kode: <div style="background: #0000; border: 5px dashed red; color: black; font-size: 30px; padding: 10px; text-align: center; width: 300px;">Garis Kotak Dashed</div>
Garis Kotak Dashed
7. Inset Border
Kode: <div style="background: #0000; border: 5px inset red; color: black; font-size: 30px; padding: 10px; text-align: center; width: 300px;">Garis Kotak Inset</div>
Garis Kotak Inset
8. Outset Border
Kode: <div style="background: #0000; border: 5px outset red; color: black; font-size: 30px; padding: 10px; text-align: center; width: 300px;">Garis Kotak Outset</div>
Garis Kotak Outset
9. Join Border
Kode: <div style="background: #0000; border-bottom: 5px dashed green; border-left: 5px groove red; border-right: 5px dotted blue; border-top: 5px outset pink; color: black; font-size: 30px; padding: 10px; width: 300px; text-align: center;">Garis Gabungan</div>
Garis Gabungan
10. Round Border
Kode: <div style="-moz-border-radius: 80px; -webkit-border-radius: 80px; background: #fff; border-radius: 80px; border: 2px solid red; height: 150px; width: 150px;">Garis Bulat</div>
Garis Bulat
Ok sekian dulu yang dapat admin share ya, agan bebas memodifikasi sesuai keinginan agan/i, semoga berguna ya
0 komentar:
Posting Komentar