Cara Membuat Variasi Garis Kotak/Border di Posting Blog

Unknown Reply 2:02 AM
Cara Membuat Variasi Garis Kotak/Border di Posting Blog

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 :

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 untuk semua terutama yang mungkin masih belum mengerti Cara Membuat Variasi Garis Kotak/Border di Posting Blog, terima kasih


Cara Membuat Variasi Garis Kotak/Border di Posting Blog

Related Posts

Belajar Blog 6231418506859862450

Post a Comment

Search

Popular Posts

Labels