Membuat Rounded Corner Dengan CSS3

"OM Swastyastu"

Setelah sekian lama akhirnya malam ini sempat posting juga. Lama tidak posting di blog rasanya ada yang kurang. :D Kebetulan sebelumnya blog ini ada masalah di tampilan rounded corner jika di buka dengan mozilla firefox. Mungkin ada beberapa dari kalian sadar kalau sebelum ini tampilan rounded corner tidak jalan dan tampilannya pun jadi standar alias tidak ada roundednya. Jadi kali ini saya akan posting cara membuat Rounded Corner dengan CSS3.

Border Radius Rounded Corner memudahkan para web programmer memanfaatkan sudut bulat (Round Corner) di desain mereka. Kalau dulunya saya sering membuat desain yang rounded corner menggunakan gambar yang di edit di photoshop tapi saat ini sudah tidak :D. Sejak pertama kali muncul pada tahun 2005 CSS rounded Corner sudah bisa digunakan
di hampir semua browser walau masih ada bedanya dari tiap browser. Ok, langsung saja kita ke contoh-contoh rounded corner..

implementasinya sangat sederhana:

#contoh {
border-radius: 20px;
} 

namun agar bisa jalan di brwoser firefox kalian perlu menambahkan prefix -moz-

#contoh {
-moz-border-radius: 20px;
border-radius: 20px;
} 

Box ini menggunakan Rounded Corner yang jalan di Firefox, Safari/Chrome, Opera and IE9.

Rounded Corner juga dapat dibuat dengan 4 batasan sudut (border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius) dan jika agar ke empat sudut rounded menggunakan border-radius saja.

contoh syntax-nya:

border-*-*-radius: [ <panjang> | <px> ] [ <panjang> | <px> ]; 

contoh implementasinya:

border-top-left-radius: 15px 5px;
border-top-right-radius: 20px;
border-bottom-right-radius: 10px 5px;
border-top-right-radius: 50 100px;

keempat rounded di atas akan mengahasilkan sudut bulat berbeda dari tiap sudutnya.

Dari berbagai artikel yang saya baca, untuk firefox versi 3.5 ke atas saat ini mengikuti spesifikasi W3C.

Mozilla Implementation	W3C Specification
-moz-border-radius	border-radius
-moz-border-radius-topleft	border-top-left-radius
-moz-border-radius-topright	border-top-right-radius
-moz-border-radius-bottomright	border-bottom-right-radius
-moz-border-radius-bottomleft	border-bottom-left-radius

Karena dulu saya hanya menggunakan prefix -moz- jadinya tampilan blog ini sempat menjadi standar(tanpa raounded). tapi saat ini sudah saya tambahkan border-radius sehingga tampilan Blog IT Programmer bisa seperti semula.

Rounded Corner ini juga bisa di tambahkan box shadow agar tampilan web lebih menarik. Sekian dulu dari saya sampai jumpa di postingan berikutnya. Selamat belajar :)

"OM Santhi, Santhi, Santhi OM"