Bentuk-bentuk Border untuk Blogger

Salam. Harini I nak ajar bentuk-bentuk border. Border ni u oll boleh la buat untuk keliling blog, untuk post entry, untuk sidebar dan macam-macam lagi. Bagi peminat border macam I, I memang suka try and error la bentuk-bentuk border ni. Bila dah boring, tukar dan tukar lagi. HE HE. Jenuh gak la cari keyword yang sesuai. Akhirnya jumpa di site Mozilla.org. Antara bentuk-bentuk border yang pelik & lain dari yang lain:

Pertama

border: solid 10px;
 
 /* the border will curve into a 'D' */
 -moz-border-radius: 0 50px 50px 0;
       border-radius: 0 50px 50px 0;

Kedua

border: groove 1em red;
 
       -moz-border-radius: 2em; 
    -webkit-border-radius: 2em;
            border-radius: 2em;

Ketiga

background: gold;
      border: ridge gold;
 
    -moz-border-radius: 13em/3em;
  webkit-border-radius: 13em 3em;
         border-radius: 13em/3em;
 

Keempat

background: gold;
 
   -moz-border-radius: 40px 10px;
        border-radius: 40px 10px; 

.main-outer {
border: 2px solid #FFFFFF;
-moz-border-radius-bottomleft: 30px;
-moz-border-radius-bottomright: 30px;
  background: $(main.background);

Kalau nak tukar, tukar di bahagian tulisan merah tu. Copy & paste sahaja. Ni contoh kod bagi border blog aku. Jangan ikut bulat-bulat, ini contoh, kalau nak background warna lain, boleh pilih kat SINI or kat SINI.

Lain-lain border biasa (value)

dotted, solid, dashed, double, groove, ridge, inset, outset.

.main-outer {
border: 2px solid #FFFFFF;
-moz-border-radius-bottomleft: 30px;
-moz-border-radius-bottomright: 30px;
  background: $(main.background);

No contoh la untuk border blog aku. Kalau nak tukar, tukar untuk tulisan merah tu. Value untuk border.

Lagi satu maklumat.Moz ni untuk browser Mozilla Firefox.Kalau korang nak semua browser boleh nampak border korang,korang kena la tambah:
-moz- : Mozilla Firefox
-goog-ms- : ??
-web-kit- :Chrome,Safari,Webkit

Kalau nak try & error ikut jenis border, just tukar je di bahagian dotted, solid, dashed & lain-lain. Saiz macam 5px,10px tu tukar ikut hati sendiri la. Mungkin ada sesetengah border ni tak sesuai dengan blog. So, korang leh try and error, sebab haritu aku pernah try nak buat double ke ape, die tak muncul. Jangan marah I pulak, marah blogger sendiri. HA HA.

Photo Courtesy : CSS Border