Cara Membuat Border | Kotak | Warna Pada Postingan

Sebenarnya saya ragu untuk menjadikan judul di atas sebagai judul artikel ini. Karena memang saya bingung yang mau saya tulis ini border atau bukan. Semoga saja benar, Border disini saya artikan sebagai kotak unik dengan garis tepi, yang sering saya gunakan untuk menulis script atau kode apapun agar lebih unik. Bisa dikatakan juga highlight script pada posting atau warna beda untuk script/kode/html di posting.

Awalnya saya terinspirasi dari kode-kode dalam pembuatan text area cantik. Dari situlah saya bisa membuat border yang cantik juga.

Border berwarna dan jenis-jenis garis bordernya.

Solid Border :

<div style="border: 2px #000000 solid; padding: 10px; background-color: #fcfcfc; text-align: left;"><font color=#0080FF> TULIS SCRIPT/KODENYA DISINI </font></div>

Grove Border :

<div style="border: 2px #000000 groove; padding: 10px; background-color: #fcfcfc; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </font></div>

Ridge Border :

<div style="border: 2px #000000 ridge; padding: 10px; background-color: #fcfcfc; text-align: left;"><font color=#0080FF> TULIS SCRIPT/KODENYA DISINI</font></div>

Outset Border :

<div style="border: 2px #000000 outset; padding: 10px; background-color: #fcfcfc; text-align: left;"><font color=#0080FF> TULIS SCRIPT/KODENYA DISINI </font></div>

Double Border :

<div style="border: 2px #000000 double; padding: 10px; background-color: #fcfcfc; text-align: left;"><font color=#0080FF> TULIS SCRIPT/KODENYA DISINI </font></div>

Dotted Border :

<div style="border: 2px #000000 dotted; padding: 10px; background-color: #fcfcfc; text-align: left;"><font color=#0080FF> TULIS SCRIPT/KODENYA DISINI </font></div>

Dashed Border :

<div style="border: 2px #000000 dashed; padding: 10px; background-color: #fcfcfc; text-align: left;"><font color=#0080FF> TULIS SCRIPT/KODENYA DISINI </font></div>

Border dengan scroll, lebar dan tinggi :

<div style="border: 2px #000000 solid; padding: 10px; background-color: #fcfcfc; overflow: auto; height: 50px; width: 300px; text-align: left;"><font color=#0080FF> TULIS SCRIPT/KODENYA DISINI </font></div>

Selamat mencoba ya...,Jangan lupa tinggalkan Komentar.

Good Luck...!