earth

Guestbook

/* Iklan google ads */
Pada tulisan terdahulu, tentang cara membuat bingkai lancip (border radius), saya menjelaskan bahwa perintah -moz-border-radius hanya bisa bekerja pada browser Firefox dan Flock saja, sementara pada browser lain tidak. Nah, pada tulisan kali ini saya akan memberikan sedikit penjelasan mengenai cara memberikan berintah border radius untuk browser-browser lain selain Firefox dan Flock.

Sebenarnya prinsip yang digunakan untuk membuat border radius supaya terbaca oleh browser lain hampir sama dengan perintah -moz-border-radius, kamu hanya tinggal mengganti perintah -moz dengan -webkit. Namun untuk membuat lancip di sudut-sudut tertentu agak berbeda dengan perintah untuk browser Firefox. Untuk lebih jelasnya kamu dapat melihat gambaran berikut:
Membuat border radius untuk semua browser
Seperti yang sudah dijelaskan pada tulisan terdahulu bahwa untuk membuat border radius pada Firefox dan Flock digunakan perintah:
-moz-border-radius: ukuranpx;
Nah, jika kamu ingin membuat border radius bisa bekerja pada browser Chrome dan Sapari, maka perintah yang digunakan adalah:
-webkit-border-radius: ukuranpx;
Sedangkan browser IE dan Opera tidak dapat men-supports border radius, tapi ada beberapa yang menyarankan untuk memberi perintah:
border-radius: ukuranpx;
Jadi, jika kamu ingin perintah border radius ini berkerja pada semua browser, tambahkan saja perintah-perintah tersebut pada kode CSS template kamu sehingga jadi seperti ini:
border-radius: ukuranpx;
-moz-border-radius: ukuranpx;
-webkit-border-radius: ukuranpx;
Membuat border radius di bagian tertentu
Jika membuat border radius di bagian tertentu untuk browser Firefox dan Flock adalah seperti ini:
-moz-border-radius-topleft: ukuranpx; (lancip kiri atas)
-moz-border-radius-topright: ukuranpx; (lancip kanan atas)
-moz-border-radius-bottomleft: ukuranpx; (lancip kiri bawah)
-moz-border-radius-bottomright: ukuranpx; (lancip kanan bawah)
Maka untuk browser Chrome dan Safari penulisannya agak sedikit berbeda, yaitu menempatkan "letak lancip"-nya sebelum kata radius dan setiap kata dipisah dengan - (strip), seperti ini:
-webkit-border-top-left-radius: ukuranpx; (lancip kiri atas)
-webkit-border-top-right-radius: ukuranpx; (lancip kanan atas)
-webkit-border-bottom-left-radius: ukuranpx; (lancip kiri bawah)
-webkit-border-bottom-right-radius: ukuranpx; (lancip kanan bawah)

Nah, segitu aja brow. Semoga tulisan ini bisa bermanfaat terutama buat kamu yang menggunakan border radius pada template-nya.
Selamat mencoba....
  • Artikel Terkait Dengan CSS dan Javascript

    Terimakasih sudah membaca artikel SC Community's Blog

    8 komentar

    salam sobat
    wah menarik nich.saya pingin coba bikin bingkai lancipnya,,,biar siip.
    trims ilmunya .

    12 November 2009 20.42  

    makin mantap ilmu blogging di sini. Terima kasih

    13 November 2009 10.20  

    wah ilmu lagi nich, aku coba yaa??

    13 November 2009 10.45  

    oohh gitu yaa, bertambah lagi donk ilmunya saya. thanx ya

    13 November 2009 10.49  

    Dapat tips lagi! Jadi ingin coba.... Trim's!

    13 November 2009 16.56  

    Tah geuning komplit plit plit ayeuna mah, hehe

    Kang eNeS, jmuaha atuh ieu template ane. tulungan lah..Jd apal ayeuna mah kang, mun di halaman hareup aya posting anu di readmore, pasti eta sidebar ngageser ka handap. jeung anehna teh, ari di dashboard mah, di halaman Tata Letak, siga teu aya perubahan na2on. Gadget kanan tetep di asalna, teu ngageser. tp mun di pratinjua mah jd ngageser ka handap.
    Kumaha atuh Ru???
    Kaabotan teu mun kang eNeS login make akun sy??
    Nuhun sateuacana.

    13 November 2009 19.38  

    Siip... jadi lengkap nih border radiusnya. Tengkiw deui kang

    5 Januari 2010 15.25  

    Salam kenal. Wah! Terimakasih nih infonya sudah aku coba di web/blogku, bisa ! Tanks Ilmunya...

    20 Oktober 2011 16.24  

    Tambahkan Komentar

    • Dimohon untuk tidak mencantumkan link aktif pada komentar sobat.
    • Gunakan Ruang Tanya pada TabView Menu, jika ingin menanyakan sesuatu yang tidak ada kaitannya dengan artikel di atas.
    Kang eNeS

    Terimakasih atas semua apresiasi yang sobat berikan.

    10 Artikel Terbaru

    10 Artikel Terpopuler