Bentuk-bentuk Border untuk Blogger | Miss Durian Runtuh

Feb 2, 2011

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




13 Flowers:

syafiq.net said... Reply Comment

kalau guna -moz- hanya untuk mozilla/gecko enjin je. kalau nak bagi tunjuk kat chrome/safari/webkit enjin gunakan -webkit-

untuk IE sepatutnya dia akan sokong yang tak tulis apa2 tu. tapi IE9 la kot yang nak support pun. yang lama2 tak dapek nak nolong deeeer~

♛ Kerani Sekolah ♛ said... Reply Comment

@syafiq.net

ohw, baru aku tau..hehe..time kasih bagitau.aku memg tak pkai ie pon..hee..pkai mozilla je

Unknown said... Reply Comment

xnak border..nak signboard..hehe

Cik Ina Do Do Cheng said... Reply Comment

Lapas ni bolehlah makcik cilok kat sini, kalau nak tukar border. pakarlah nazirah sekarang ni.

Unknown said... Reply Comment

asal xde chat box ? ak da tag hang. haha :))

♛ Kerani Sekolah ♛ said... Reply Comment

@hajar_razak

chat box aku dok atas tu la..heheh..okey :)

Amalina said... Reply Comment

naz. tambah satu bg border. rounded border. :P

Anonymous said... Reply Comment

tqsm. berkesan 4 any type laptop. (:

syafiq.net said... Reply Comment

memang kita jarang guna ie tapi kalau buat site untuk gov memang ie la yang diorang nak. aku naik tensen gak nak betulkan masalah ie neh hahaha :D

so how bout ur pita?

Anonymous said... Reply Comment

apa yang saya cari, terima kasih