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.
Berikut bermacam-macam tampilan yang biasanya digunakan pada kotak garis blog :
Khusus Untuk Warna Background kita cukup menukar kode seperti ini : "background: #0000; terus sesuaikan warna yang kita inginkan misalnya kta mau warna kuning Maka Kodenya Berubah seperti ini : "background: red;
Macam-macam Border lengkap dengan Kode :
Kode-kode ini sudah bisa langsung kita copy lalu kita pastekan di halaman HTML posting blog.
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 anda, semoga berguna ya untuk semua terutama yang mungkin masih belum mengerti Cara Membuat Variasi Garis Kotak/Border di Posting Blog, terima kasih
