Home » » Cara Membuat Boder teks dengan CSS style border

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.

PENTING!!!
ANDA TIDAK BEKERJA? INGIN TAHU INFORMASI LOWONGAN KERJA TERBARU DI KOTA ANDA? KUNJUNGI LOWONGAN KERJA TERBARU DISINI
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Delta Komputer

0 komentar:

Posting Komentar

 
Support : PING by :Ping-o-Matic | Pusat Promosi
Copyright © 2011. Tutorial dan Free Download - All Rights Reserved
Template Modify by Creating Website
Re Design by Bang Aris