Cara Membuat Border di Blogger (bagian 4)

Cara Membuat Border di Blogger (bagian 4)

Author : Published:
Pada artikel ini, kita akan belajar bersama membuat Border dengan cara mengkombinasikan type-type Border yang ada, seperti Solid, Double, Groove, Ridge, Dotted, Dashed, Inset dan Outset, seperti yang pernah dikemukakan pada artikel Cara Membuat Border di Blogger (bagian 3).

Cara Membuat Border di Blogger (bagian 4)
Sebagai langkah awal, kita akan kombinasikan dua type Border, dibawah ini beberapa contoh Kode HTML dan Border hasil dari kombinasi tersebut.

Contoh 1.
Kode HTML :
<div style="background-color: #eaeaea; border-color: #444; border-style: dashed none; border-width: 5px; padding: 10px; text-align: center;">Contoh Border Kombinasi Dashed - none</div>

Hasilnya :
Contoh Border Kombinasi Dashed - none

Contoh 2.
Kode HTML :
<div style="background-color: #eaeaea; border-color: #444; border-style: groove dashed; border-width: 10px; padding: 10px; text-align: center;"> Contoh Border Kombinasi Groove - Dashed</div>

Hasilnya :
Contoh Border Kombinasi Groove - Dashed

Contoh 3.
Kode HTML :
<div style="background-color: #eaeaea; border-color: #444; border-style: double dotted; border-width: 10px; padding: 10px; text-align: center;"> Contoh Border Kombinasi Double - Dotted</div>

Hasilnya :
Contoh Border Kombinasi Double - Dotted

Contoh 4.
Kode HTML :
<div style="background-color: #eaeaea; border-color: #444; border-style: none ridge; border-width: 10px; padding: 10px; text-align: center;"> Contoh Border Kombinasi none - Ridge</div>

Hasilnya :
Contoh Border Kombinasi none - Ridge

Contoh 5.
Kode HTML :
<div style="background-color: #eaeaea; border-color: #444; border-style: double solid; border-width: 10px; padding: 10px; text-align: center;"> Contoh Border Kombinasi Double - Solid</div>

Hasilnya :
Contoh Border Kombinasi Double - Solid

Kamu bisa coba sendiri mengkombinasikan type Border yang lain untuk mendapatkan hasil yang diinginkan. Sekarang kita akan kombinasikan tiga type Border sekaligus. Berikut contohnya :

Contoh 6.
Kode HTML :
<div style="background-color: #eaeaea; border-color: #444; border-style: none none ridge; border-width: 10px; padding: 10px; text-align: center;"> Contoh Border Kombinasi none - none - Ridge</div>

Hasilnya :
Contoh Border Kombinasi none - none - Ridge

Contoh 7.
Kode HTML :
<div style="background-color: #eaeaea; border-color: #444; border-style: dashed solid double; border-width: 5px; padding: 10px; text-align: center;">Contoh Border Kombinasi Dashed - Solid -Double</div>

Hasilnya :
Contoh Border Kombinasi Dashed - Solid - Double

Contoh 8.
Kode HTML :
<div style="background-color: #eaeaea; border-color: #444; border-style: inset none outset; border-width: 10px; padding: 10px; text-align: center;">Contoh Border Kombinasi Inset - none - Outset</div>

Hasilnya :
Contoh Border Kombinasi Inset - none - Outset

Contoh 9.
Kode HTML :
<div style="background-color: #eaeaea; border-color: #444; border-style: dotted dashed groove; border-width: 5px; padding: 10px; text-align: center;">Contoh Border Kombinasi Dotted - Dashed - Groove</div>

Hasilnya :
Contoh Border Kombinasi Dotted - Dashed - Groove

Contoh 10.
Kode HTML :
<div style="background-color: #eaeaea; border-color: #444; border-style: none double none; border-width: 5px; padding: 10px; text-align: center;">Contoh Border Kombinasi none - Double - none</div>

Hasilnya :
Contoh Border Kombinasi none - Double - none

Berikut ini adalah contoh Border dari hasil kombinasi empat type sekaligus, dilengkapi dengan penulisan Kode HTML-nya.

Contoh 11.
Kode HTML :
<div style="background-color: #eaeaea; border-color: #444; border-style: none none none ridge; border-width: 10px; padding: 10px; text-align: center;">Contoh Border Kombinasi none - none - none - Ridge</div>

Hasilnya :
Contoh Border Kombinasi none - none - none - Ridge

Contoh 12.
Kode HTML :
<div style="background-color: #eaeaea; border-color: #444; border-style: double solid solid double; border-width: 10px; padding: 10px; text-align: center;">Contoh Border Kombinasi Double - Solid - Solid - Double</div>

Hasilnya :
Contoh Border Kombinasi Double - Solid - Solid - Double

Contoh 13.
Kode HTML :
<div style="background-color: #eaeaea; border-color: #444; border-style: none outset solid none; border-width: 10px; padding: 10px; text-align: center;">Contoh Border Kombinasi none - Outset - Solid - none</div>

Hasilnya :
Contoh Border Kombinasi none - Outset - Solid - none

Contoh 14.
Kode HTML :
<div style="background-color: #eaeaea; border-color: #444; border-style: groove ridge ridge groove; border-width: 15px; padding: 10px; text-align: center;">Contoh Border Kombinasi Groove - Ridge - Ridge - Groove</div>

Hasilnya :
Contoh Border Kombinasi Groove - Ridge - Ridge - Groove

Contoh 15.
Kode HTML :
<div style="background-color: #eaeaea; border-color: #444; border-style: dotted double dashed solid; border-width: 8px; padding: 10px; text-align: center;">Contoh Border Kombinasi Dotted - Double - Dashed - Solid</div>

Hasilnya :
Contoh Border Kombinasi Dotted - Double - Dashed - Solid

Demikianlah beberapa contoh Border yang kita dapatkan dari hasil mengkombinasikan type-type Border, kamu bisa berlatih sendiri dengan mencoba kombinasi yang lain. Untuk artikel berikutnya : Cara Membuat Border di Blogger (bagian 5), kita akan belajar memahami cara kerja Kode HTML saat mengkombinasikan type-tpe Border.

Semoga artikel ini bermanfaat.
0 Comments