CSS >> Border (2)

Pada topik sebelumnya kita membahas border, border sendiri memiliki 3 sub bagian yaitu:

1. Warna 
2. gaya 
3. dan besar

Sebagai contoh:

border-bottom 3px solid blue

Untuk bottom kita bisa memecah sebagai berikut:

• border-bottom-color . Nilainya:
  1. yellow; 
  2. #00ff00; 
  3. rgb(255,0,255);
• border-bottom-style. Nilainya dapat dilihat di style (ada dibawah)
• border-bottom-width. Ukuran berupa pixel / px

Bentuk CSS Border lainnya

1. border-collapse memiliki nilai :
   • collapse;
   • separate;
   • Inherited
     
2. border-spacing. Di isi angka berupa pixel
3. border-color: di isi warna seperti
   • yellow;
   • #00ff00;
   • rgb(255,0,255);
4. border-style
   • none; 
   • hidden; 
   • dotted; 
   • dashed; 
   • solid; 
   • double; 
   • groove; 
   • ridge;
   •  inset; 
   • outset;
   •  inherited

BORDER-IMAGE

format dasar

border-image: url(border.png) none 100% 1 0 stretch;

saya kurang faham penggunaan border-image, tetapi tampaknya tidak begitu bagus digunakan. Untuk hasil yang lebih maksimal, masukkan juga dengan tulisan dibawah:

• -moz-border-image source slice width outset repeat;
• -webkit-border-image
• -o-border-image

Dimana formatnya sama seperti di atas. Penjelasan tentang isi dari border-image, border image ini terdiri dari

• source 
• slice
• width
• outset
• repeat;

Versi detailnya

• border-image-source
• border-image-width
  

Untuk keamanan lebih baik hindari

• border-image-repeat(stretch|repeat|round;); 
• border-image-outset (angka px); 
• border-image-slice (angka|%|fill;)

didalam kurung adalah nilai yang bisa dimasukkan


berikutnya kita akan membahas border-radius