Membuar Border Style dengan CSS

Belajar css memang sangat menyenangkan, kali ini saya coba berikan sedikit tips dalam membuat border blog. Mungkin ada yang belum mengetahui ragam atau jenis border, padahal ada banyak jenis border yang bisa di gunakan untuk mempercantik tulisan atau blog. Dibawah ini ada beberapa daftar jenis border yang bisa sobat gunakan untuk mengganti border sidebar atau main post blog.

border-style: dotted border-style: solid border-style: groove border-style: inset

border-style: dashed border-style: double border-style: ridge border-style: outset

Berikut ini contoh macam style border yang paling diminati :

Border-style: dotted

Scriptnya :

<div style="border:5px dotted #08088A; background:#FFF; width:500px; padding:20px"> Tulisan Sobat di sini </div>

 Preview:

Tulisan Sobat di sini

Border-style: solid

Scriptnya :

<div style="border:5px solid #08088A; background:#FFF; width:500px; padding:20px"> Tulisan Sobat di sini </div>

 
Preview  :

Tulisan Sobat di sini

Border-style: dashed

Scriptnya :

<div style="border:5px dashed #08088A; background:#FFF; width:500px; padding:20px"> Tulisan Sobat di sini </div>

Preview :

Tulisan Sobat di sini

 

Border-style: groove

Scriptnya :

<div style="border:5px groove #08088A; background:#FFF; width:500px; padding:20px"> Text Sobat Di Sini </div>

 preview  :

Text Sobat Di Sini

Border-style: double

Scriptnya :

<div style="border:5px double #08088A; background:#FFF; width:500px; padding:20px"> Text Sobat Di Sini </div>

 

 preview  :

Text Sobat Di Sini

Border-style: inset

Scriptnya :

<div style="border:5px inset #08088A; background:#FFF; width:500px; padding:20px"> Text Sobat Di Sini </div>

 Preview  :

Text Sobat Di Sini

Border-style: outset

Scriptnya :

<div style="border:5px outset #08088A; background:#FFF; width:500px; padding:20px"> Text Sobat Di Sini </div>

 

 Preview  :

Text Sobat Di Sini

 

Border-style: ridge

Script  :

<div style="border:5px ridge #08088A; background:#FFF; width:500px; padding:20px"> Text Sobat Di Sini </div>

 Preview  :

Text Sobat Di Sini

Border Mix 

Scriptnya :

<div style="border-style:dotted  dashed double outset; border-color:red orange blue purple; border-width:5px; background:#FFF; width:500px; padding:20px"> Text Sobat Di Sini </div>

Preview  :

Text Sobat Di Sini

Note   :

• border:5px adalah tebal dari border.


• #08088A adalah kode untuk warna biru


• width:500px adalah lebar dari kotak.


• padding:20px adalah jarak antara tulisan dengan border.


• background:#FFF adalah warna latar.

-Selamat Mencoba -