Tips Sudut Melengkung Pada IE – PT Proweb Indonesia

Mungkin anda seorang web designer yang pusing menghadapi browser IE yang ‘rewel’. CSS 3 yang masih belum jalan di IE (sebelum IE9). Sekarang IE telah memperbaiki kinerjanya dengan sudah bisanya CSS3 berjalan di browser tersebut. Ambil satu contoh yang adalah membuat efek melengkung di setiap sudut tag html (div, input, textarea, dll), contohnya sudut melengkung di bawah ini :

Membuat sudut lengkung seperti diatas memang mudah, jika dilakukan pada browser seperti mozilla, ie, opera, dll. dengan menggunakan script berikut :

.rounded{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

tapi beda cerita ketika kita jalan di IE, style css yang kita buat tadi tidak berfungsi di IE. ini yang menyebabkan para web designer mensiasati dengan menggunakan image untuk mendapatkan efek sudut melengkung yang compatible oleh semua browser.

Semenjak keluar IE 9, masalah ini sudah bisa diatasi dengan menambahkan script : border-radius: 10px;

.rounded{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

}

efek sudut melengkung bisa kita dapatkan di IE 9. script tersebut hanya jalan di IE 9, lalu bagaimana dengan versi IE sebelumnya?

OK, Begini caranya :

Untuk mendapatkan efek sudut melengkung di semua versi IE (6, 7, 8) kita membutuhkan file pendukung, yaitu border-radius.htc. File tersebut bisa didownload di sini

lalu pada script css kita tambahkan ini :

.rounded{

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
behavior: url(/css/border-radius.htc);
border-radius: 10px;

}

Selesai, sekarang efek sudut melengkung sudah berjalan di semua IE.

Selamat Mencoba.. 😀

Kunjungi www.proweb.co.id untuk menambah wawasan anda.

Tips Sudut Melengkung Pada IE