Border | Warna Beda Pada Script di Posting

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- overflow: auto; height: 50px; width: 300px; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

Anda tertarik...
Selamat Mencoba