Membuat Border | Warna Beda Pada Script di Posting

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 #006400 solid; padding: 10px; background-color: #c3fdb8; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

» Ridge Border

<div style="border: 2px #006400 ridge; padding: 10px; background-color: #c3fdb8; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

» Groove Border

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

» Inset Border

<div style="border: 2px #006400 inset; padding: 10px; background-color: #c3fdb8; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

» Outset Border

<div style="border: 2px #006400 outset; padding: 10px; background-color: #c3fdb8; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

» Double Border

<div style="border: 2px #006400 double; padding: 10px; background-color: #c3fdb8; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

» Dotted Border

<div style="border: 2px #006400 dotted; padding: 10px; background-color: #c3fdb8; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

» Dashed Border

<div style="border: 2px #006400 dashed; padding: 10px; background-color: #c3fdb8; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

Border dengan scroll, lebar dan tinggi

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

Keterangan:
Anda dapat mempelajari kode-kode yang saya beri warna berbeda.