Sempak Mungil XI IPS 4

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>

Border-style: solid

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

solid solid solid solid solid

</div>
 

Border-style: dashed

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

dashed dashed dashed dashed dashed

</div>
 

Border-style: groove

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

groove groove groove groove groove

</div>
 

Border-style: double

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

double double double double double

</div>
 

Border-style: inset

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

inset inset inset inset inset

</div>
 

Border-style: outset

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

outset outset outset outset outset

</div>
 

Border-style: ridge

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

ridge ridge ridge ridge ridge

</div>

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>
 

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.