Membuat Border Cantik Dengan Tag HTML

Translate this Article...

Blog yang berpenampilan rapi dan menarik tentu menjadi idaman para blogger, nilai estetika dari sebuah blog janganlah dianggap remeh, selain content yang berbobot penampilan juga harus representatif.

Memang semua itu tak lepas dari selera dari setiap orang, tetapi paling tidak jika sebuah blog tertata dengan rapi, baik itu menu navigasinya, image yang ditampilkan, animasi-animasi yang menarik dan lain sebagainya, akan menimbulkan kesan �plus� pada pandangan pertama awal jumpa, sehingga pengunjung tidak akan cepat bosan dan jenuh untuk membolak-balik isi  halaman blog anda.

Banyak yang dapat anda lakukan untuk memperindah tampilan blog anda, salah satunya adalah dengan menambahkan border. Ada beberapa border pada kode tag HTML yang dapat anda kreasikan kedalam blog.
(baca juga Menata Susunan Kalimat Dengan Text Alignment Pada HTML    |    Membuat Daftar atau List Menggunakan Kode HTML

Solid Border

Contoh tag Solid Border :

---

<div style="width:200px;height:60px;border:1px solid blue;">

Contoh Solid Border.

</div>

---

Hasilnya seperti dibawah ini :

Contoh Solid Border.

Dotted Border

Contoh tag Dotted Border :

---

<div style="width:200px;height:60px;border:2px dotted blue;">

Contoh Dotted Border.

</div>

---

Hasilnya seperti dibawah ini :

Contoh Dotted Border.

Dashed Border

Contoh tag Dashed Border :

---

<div style="width:200px;height:60px;border:2px dashed blue;">

Contoh Dashed Border.

</div>

---

Hasilnya seperti dibawah ini :

Contoh Dashed Border.

Outset Border

Contoh tag Outset Border :

---

<div style="width:200px;height:60px;border:2px outset blue;">

Contoh Outset Border.

</div>

---

Hasilnya seperti dibawah ini :

Contoh Outset Border.

Inset Border

Contoh tag Inset Border :

---

<div style="width:200px;height:60px;border:2px inset blue;">

Contoh Inset Border.

</div>

---

Hasilnya seperti dibawah ini :

Contoh Inset Border.

Grooved Border

Contoh tag Grooved Border :

---

<div style="width:200px;height:60px;border:2px groove blue;">

Contoh Grooved Border.

</div>

---

Hasilnya seperti dibawah ini :

Contoh Grooved Border.

Double Border

Contoh tag Double Border :

---

<div style="width:200px;height:60px;border:2px double blue;">

Contoh Double Border.

</div>

---

Hasilnya seperti dibawah ini :

Contoh Double Border.

Ridget Border

Contoh tag Ridged Border :

---

<div style="width:200px;height:60px;border:2px ridge blue;">

Contoh Ridged Border.

</div>

---

Hasilnya seperti dibawah ini :

Contoh Ridged Border.

Mixed Border

Contoh tag Mixed Border :

---

<div style="width:200px;height:60px;border-width:5px;border-color:black;border-style:dotted dashed solid double;">
Create borders for any HTML element.
</div>

---

Hasilnya seperti dibawah ini :

Contoh Mixed Border.

Silahkan anda coba dengan merubah width, border-color, boder-style, height dan lain sebagainya untuk membandingkan hasilnya, sambil belajar memahami kode-kode tag HTML ini, selamat mencoba.