Membuat Border Layout Blog Melengkung

Pada artikel Cara Membuat Border Radius Blog saya telah membuat beberapa contoh cara membuat border radius. Tapi kali ini saya akan membahas tentang browser yang mendukung pembuatan border radius dengan kode CSS berikut sintaksnya. Seperti anda ketahui bahwa browser yang ada saat ini banyak. Dan untungnya sudah hampir semua browser seperti IE+9, Firefox, Chrome dan Safari sudah mendukung. Namun untuk Safari 5 butuh prefix –webkit dan Opera prefix -o-. Berikut adalah kode border radius untuk masing-masing browser.

IE

-ms-border-top-left-radius

-ms-border-top-right-radius

-ms-border-bottom-left-radius

-ms-border-bottom-right-radius

Opera

-o-border-top-left-radius

-o-border-top-right-radius

-o-border-bottom-left-radius

-o-border-bottom-right-radius

 Firefox

-moz-border-radius-topleft

-moz-border-radius-topright

-moz-border-radius-bottomright

-moz-border-radius-bottompleft

Safari

-webkit-border-top-right-radius

-webkit-border-bottom-right-radius

-webkit-border-bottom-left-radius

-webkit-border-top-left-radius

Karena kita menghadapi banyak browser, anda harus membuat setiap kode css untuk satu atribut dapat digunakan serempak untuk semua browser agar tampilan border-radius lebih maksimal.

border: 1px solid black;

border-radius:10px;    

-moz-border-radius:10px;

-webkit-border-radius:10px;

-ms-border-radius:10px;

-o-border-top-radius:10px;