baru dibuat kembali

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:
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;

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....