Berbagai Macam Border Style Dengan CSS

Border style dapat sedikit mempercantik artikel teks yang dihiasi list CSS. Sangat mudah dan cepat dalam membuatnya. Tak perlu banyak kode, hanya beberapa baris saja untuk membuat border style CSS. Di bawah ini beberapa kode border style CSS :

Ridge Style :

Free Download Software, Tips and Trick Computer, Blog and SEO

Kode :

<div style="border:5px ridge #Kode Warna; background:#Kode Background; width:500px; padding:20px">

<center>Free Download Software, Tips and Trick Computer, Blog and SEO</center>

</div>

Inset Style :

Free Download Software, Tips and Trick Computer, Blog and SEO

Kode :

<div style="border:5px inset #Kode Warna; background:#Kode background; width:500px; padding:20px">

<center>Free Download Software, Tips and Trick Computer, Blog and SEO</center>

</div>

Outset Style :

Free Download Software, Tips and Trick Computer, Blog and SEO

 Kode :

<div style="border:5px outset #Kode Warna; background:#Warna Background width:500px; padding:20px">

<center>Free Download Software, Tips and Trick Computer, Blog and SEO</center>

</div>

Groove Style :

Free Download Software, Tips and Trick Computer, Blog and SEO

Kode :

<div style="border:5px groove #Kode Warna; background:#Warna Background; width:500px; padding:20px">

<center>Free Download Software, Tips and Trick Computer, Blog and SEO</center>

</div>

Double style :

Free Download Software, Tips and Trick Computer, Blog and SEO

Kode :

<div style="border:5px double #Kode Warna; background:#Warna Background; width:500px; padding:20px">

<center>Free Download Software, Tips and Trick Computer, Blog and SEO</center>

</div>

Solid Style :

Free Download Software, Tips and Trick Computer, Blog and SEO

Kode :

<div style="border:5px solid #Kode Warna; background:#Warna Background; width:500px; padding:20px">

<center>Free Download Software, Tips and Trick Computer, Blog and SEO</center>

</div>

Dotted Style :

Teks Anda Di Sini!

Kode :

<div style="border:5px dotted #Kode Warna; background:#Warna Background; width:500px; padding:20px">

<center>Free Download Software, Tips and Trick Computer, Blog and SEO</center>

</div>

Dashed Style :

Teks Anda Di Sini!

Kode :

<div style="border:5px dashed #Kode Warna; background:#Warna Background; width:500px; padding:20px">

<center>Free Download Software, Tips and Trick Computer, Blog and SEO</center>

</div>

Ubah beberapa bagian :

• #Kode Warna, yaitu kode yang akan menentukan warna apa yang anda tampilkan di list. Dapat anda lihat disini. Lalu ganti #Kode Warna tersebut menjadi kode warna yang anda sukai sendiri. Misalnya kode warna situs diatas FFFFFF. Anda dapat menambahkan kode # sebelum kode warna, hasilnya #FFFFFF

• #Warna Background, yaitu warna yang akan menampilkan warna latar teks anda. Sama seperti kode warna di atas, warna background dapat dilihat disini.

• Free Download Software, Tips and Trick Computer, Blog and SEO, yaitu teks yang ingin anda tampilkan pada tengah list border.

• Width:500px , anda dapat mengubah width: dengan ukuran panjang list sesuai anda. (jangan mengubah angka lebih dari ukuran kotak posting anda, berikanlah angka minimal 400 untuk ukuran ideal).