Rounded Border

Salam & Hello.

Pernah tak tengok border yang macam melengkung sikit, bukan yang jenis petak semacam tu je. Kalau nak buat border jadi melengkung sikit kenalah tau sikit² kan basic border-radius-rounded corner ni. Kali ni aku bukan nak buat tutorial tapi boleh jugak kot kalau nak panggil tutorial. Cuma nak terang²kan sikit macam mana nak buat rounded border. Bagi aku rounded border ni lebih menarik daripada border biasa. Kalau korang plak? Huhu~


Mula-mula korang kena fahami code² kat bawah ni:

Work in IE9, Google Chrome

-webkit-border-radius: 10px;

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;

Work only in Firefox

-moz-border-radius: 10px;

-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;

Work in IE9, Chrome

border-radius: 10px;

border-top-left-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;

Untuk samakan setiap radius gunakan code single kat atas dan ubah no kelengkungan dia. Semakin besar no, semakin lengkung lah rounded border ko. Bagi aku no rounded border yang ideal ialah 10-50px.

Lepas tu korang boleh tambah sekali nak buat kaler ape atau nak tambah shadow ke opacity ke ikut suka hati korang lah kan, korang punya kreativiti. Yang penting sekarang korang dah tau macam mana nak buat border yang melengkung. Asyik petak je border korang boring lah jugak kan. So, sekarang masing-masing kita rounded-border kan border kita. Hehihu~ :)

Psstt: Nah site untuk korang, css3.info/rounded-border dan zenelemants yang mahu ketahui lebih tentang rounded border ni.

22 comments:

  1. wah! tq..hehe..patut ar ada border yg amir buat xnmok di g.crome.. ha..nak test la lagi..hehe

    ReplyDelete
  2. terima kasih atas segala maklumat berguna ini "_ :)

    ReplyDelete
  3. knp tak leh.. sy salah paste ker.. huhu

    ReplyDelete
  4. @cik dibadeebut - awk paste kt mne? dia ad tmpt dia nk paste.

    ReplyDelete
  5. yeahh ! akhirnye jmpe tutorial nih . tengs kak zira <3

    ReplyDelete
  6. sis , kalau nak buat curve nie code cari dkt edit html kan ? tapi nak type apa ? Thanks:D

    ReplyDelete
  7. @Imann Ajilia - erkk, curve? mksudnye? sy kurang phm la. sorry. awk bleh ltk kt mne2 je code ni mcm contoh nk sidebar rounded border jd letak la kt bhgian sidebar. emm, phm ke? hehhee~

    ReplyDelete
  8. Ehh sorry2 , round border :P silapp .
    Code yang sis bagi tu kan nak paste dkt mana ? xP

    ReplyDelete
  9. @Imann Ajilia - ohh, code ni paste kat mana². Mcm mana sy nk trgkan ek. Mcm ni sy bg contoh, sy nk blog sy border dia melengkung sikit kan, so sy paste la dekat #content-wrapper. haa, mcm tu la lbih kurang. hrp awk fhm yea. :)

    ReplyDelete
  10. kalau template designer guna yg nie bole ke? Nak paste kat mane yea kalau template designer punye?

    ReplyDelete
  11. Salam Hi Zira. Kenapa saya tak dapat cari code yang dimaksudkan? Dah backup, dah ctrl+F still sama tak ada code #wrapper tuh? Setiap code tuh bergantung pada design template yang kita guna ke?

    ReplyDelete
  12. @★Leha_Mnbma★ - boleh rsenye. sy x gune template designer tp rsenye code dia xde beza. apa2 pun awk try. hmm, mcm ni kalau contoh awk nk rounded border kan blog awk mcm sy punye blog ni kan, kena lah paste kat outer-wrapper. yg penting kita mesti tau kat mne kita nak paste. :)

    ReplyDelete
  13. @Nurizyan Syazwani Nordin - wslm, hai izyan syazwani. :) haah, setiap code tu mmg bergantung jenis template ape yg kita guna. so, kita kena lah pndai kenal pasti code dia apa sbenarnya. hope awk dpt cri yeah.:)

    ReplyDelete
  14. @shalina samsudin awk rse nk paste kat mne? contohnya awk nk bg blog awk melengkung x petak mcm sy awk paste dekat #outer-wrapper kalo x silap sy. nk paste kat mne pun brgntung kpd code yg kita akn paste kat situ. sy hrp awk fhm. HEHEE~ ^^

    ReplyDelete
  15. @Heartzirah

    tak faham -,-

    haa,nak tanye la ..
    kan kalau dalam setiap post ade background kan..
    sy nak buat ade background n ade border..round border..cmno ek?? hehe

    ReplyDelete
  16. @Nurizyan Syazwani tak², sy guna template yg XML tu, bkn classic template or design templte tau..

    ReplyDelete
  17. @shalina samsudin oo..mcm blog sy ni ek. gune code kat ats tp paste kat code yg ade post.

    ReplyDelete