Macam Macam Kotak Script Div Style

Bloggerkotasukabumi - Apa kabar sobat? kabar baik pastinya.
Pada postingan kali ini saya akan share  kembali tentang Macam-Macam Kotak Script.

Dan sobat blogger bisa memilih salah satunya untuk di pasang di postingan, di sidebar atau menurut selera sobat blogger.

Dan di bawah ini ada beberapa kode untuk membuat kotak div style.

Di bawah ini ada beragam pilihan kode berikut contoh hasilnya :

• Kode :

  <div style="border: 2px solid blue;"> <div style="border: 3px solid red;"> <div align="center"> Tulis Text Disini</div> </div> </div>
  Hasilnya :
  Tulis Text Disini
• Kode :

  <div style="border: 4px solid yellow;"> <div align="center"> <span style="color: coral;">Tulis Text Disini</span></div> </div>
  Hasilnya
  Tulis Text Disini
• Kode :

  <div style="border: 3px double #ff0000; padding: 5px;"><div align="center">Tulis Text Disini</div></div>
  Hasilnya :
  Tulis Text Disini
• Kode :

  <div style="border: 3px double #0000ff; padding: 5px;"><div style="border: 2px solid #0077ff; padding: 5px;"><div align="center">Tulis Text Disini</div></div></div>
  Hasilnya :
  Tulis Text Disini
• Kode :

  <div style="border-color: lime; border-style: dotted; border-width: 2px; margin: 1px; padding: 1px;"><center>Tulis Text Disini</center></div>
  Hasilnya :
  Tulis Text Disini
• Kode :

  <div style="border-style:inset;border-width:5pt;border-color:black" align="center">Tulis Text Disini</div>
  Hasilnya :
  Tulis Text Disini
• Kode :

  <div style="background: #bbddff; border: 5px outset#c0c0c0; margin: 0px; padding: 5px;"><div align="center">Tulis Text Disini</div></div>
  Hasilnya :
  Tulis Text Disini
• Kode :

  <div style="border: 2px solid#220000;"><div style="border: 2px solid#dddddd;"><div style="border: 4px solid#220000;"><div style="border: 2px solid#dddddd;"><div style="border: 2px solid#220000;"><div align="center"><span style="color: red;">Tulis Text Disini</span></div></div></div></div></div></div>
  Hasilnya :
  Tulis Text Disini
• Kode :

  <div style="border: 1px solid#2222ff;"><div style="border: 1px solid#3333ff;"><div style="border: 1px solid#4444ff;"><div style="border: 1px solid#5555ff;"><div style="border: 1px solid#2222ff;"><div style="border: 1px solid#3333ff;"><div style="border: 1px solid#4444ff;"><div style="border: 1px solid#5555ff;"><div style="background-color: #44ccff;"><div align="center"><span style="color: red;">Tulis Text Disini</span></div></div></div></div></div></div></div></div></div></div>
  Hasilnya :
  Tulis Text Disini
• Kode :

  <div style="border: 3px solid#2222ff;"><div style="background-image: url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/linerbn.gif'); border: 0px; margin: 2px; padding: 2px;"><div style="background-color: #cccccc;"><div align="center"><span style="color: red;">Tulis Text Disini</span></div></div></div></div>
  Hasilnya :
  Tulis Text Disini
• Kode :

  <div style="border: 1px solid#001100;"><div style="border: 1px solid#002200;"><div style="border: 1px solid#003300;"><div style="border: 1px solid#004400;"><div style="border: 1px solid#005500;"><div style="border: 1px solid#006600;"><div style="border: 1px solid#007700;"><div style="border: 1px solid#008800;"><div style="border: 1px solid#009900;"><div style="border: 1px solid#00aa00;"><div style="border: 1px solid#009900;"><div style="border: 1px solid#008800;"><div style="border: 1px solid#007700;"><div style="border: 1px solid#006600;"><div style="border: 1px solid#005500;"><div style="border: 1px solid#004400;"><div style="border: 1px solid#003300;"><div style="border: 1px solid#002200;"><div style="border: 1px solid#001100;">
  <div align="center"><span style="color: red;">Tulis Text Disini</span></div>
  </div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
  Hasilnya :
  Tulis Text Disini

Selamat mencoba dan semoga bermanfaat.