Cara Membuat Boder teks dengan CSS style border

Tutorial Blog Cara Membuat Boder teks dengan CSS style border merupakan bahasanan kali ini. Sungguh Blogging memang mengasikkan terkadang kalau sudah berhadapan dengan blog membuat saya tak ingat lagi dengan waktu. Berhubugan denga CSS!, kali ini kita akan mepelajari resep membuat border berbagai jenis dan ukuran yang bisa disesuikan . 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 dari border yang bisa sobat gunakan :

Border-style: dotted

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

dotted dotted dotted dotted dotted

</div>

dotted dotted dotted dotted dotted

Border-style: solid

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

solid solid solid solid solid

</div>
 

solid solid solid solid solid

Border-style: dashed

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

dashed dashed dashed dashed dashed

</div>
 

dashed dashed dashed dashed dashed

Border-style: groove

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

groove groove groove groove groove

</div>
 

groove groove groove groove groove

Border-style: double

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

double double double double double

</div>
 

double double double double double

Border-style: inset

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

inset inset inset inset inset

</div>
 

inset inset inset inset inset

Border-style: outset

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

outset outset outset outset outset

</div>
 

outset outset outset outset outset

Border-style: ridge

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

ridge ridge ridge ridge ridge

</div>

ridge ridge ridge ridge ridge

Border Campur Aduk

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

dotted dashed double outset

</div>
 

dotted dashed double outset

Keterangan :

• border:5px adalah tebal dari border.
• #08088A adalah kode untuk warna biru, bisa anda ganti sesuai keinginan
• width:500px adalah lebar dari kotak.
• padding:20px adalah jarak antara tulisan dengan border.
• background:#FFF adalah warna latar.

itu dia sedikit tetang penggunaan CCS untuk membuat beragam jenis boder. Semoga bisa bermanfaat.