Cara Membuat Bingkai Lancip (Border Radius)

Untuk membuat bingkai lancip (border radius), perintah -moz-border-radius hanya bisa bekerja pada browser Firefox dan Flock saja, sementara pada browser lain tidak. Berikut ini akan dijelaskan 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, yaitu hanya mengganti perintah -moz dengan -webkit. Namun untuk membuat lancip di sudut-sudut tertentu agak berbeda dengan perintah untuk browser Firefox.
Untuk lebih jelasnya dapat melihat gambaran berikut:

Membuat border radius untuk semua browser

Untuk membuat border radius pada Firefox dan Flock digunakan perintah:

-moz-border-radius: ukuranpx;

Dan ika 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 ingin perintah border radius ini berkerja pada semua browser, tambahkan saja perintah-perintah tersebut pada kode CSS template 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)

Demikian sedikit penjelasan dari tulisan ini semoga bisa bermamfaat terutama bagi yang menggunakan border radius pada template-nya.