CSS3 Rounded Corners Menggunakan Border-Radius

Salah satu fitur berguna dari CSS3 adalah border-radius properti, yang menawarkan cara yang mudah untuk membuat rounded corners pada setiap element pada halaman site anda. Tampilan rounded corner dapat diterapkan pada masing-masing sudut atau semua sudut dari element, dan bahkan dapat bekerja pada unsur-unsur dengan latar belakang gambar. Secara praktis border-radius mendukung pada FireFox3, Safari3, dan Google Chrome, dengan sifat dan spesifik vendor yang setara hingga pada akhirnya mendukung border-radius.



Sementara untuk rincian border-radius properti yang digunakan menurut sifat dan spesifik vendor untuk FF3.x, Safari 3.x, dan Chrome yang dapat Anda gunakan adalah:

• -moz-border-radius: value.

• -webkit-border-radius: value.

Safari dan Chrome baik dalam menggunakan "-WebKit-" versi . Untuk saat ini, anda harus mendefinisikan kedua propertis tersebut agar browser dapat berjalan dan mendukung versi resmi mereka. "Value" dalam hal ini dapat menjadi nilai singular (seperti: 10px) yang dapat mendefinisikan border-radius untuk semua sudut (ke 4 sudut) ,




Hal ini membuat semua sudut element akan dibuat rounded effect (dibulatkan/ lengkung). Tetapi anda juga dapat memilih sudut tertentu saja untuk dibuat rounded effect, karena border radius properties memungkinkan anda untuk melakukan itu. Berikut adalah border radius untuk masing masing sudut:

• -moz-border-radius-topleft.
• -moz-border-radius-topright.
• -moz-border-radius-bottomright.
• -moz-border-radius-bottomleft.

• -webkit-border-top-left-radius.
• -webkit-border-top-right-radius.
• -webkit-border-bottom-right-radius.
• -webkit-border-bottom-left-radius.

Pada Firefox, -moz-border-radius properties dapat bertindak sebagai properti singkat untuk semua sudut(ke 4 sudut), Untuk saat ini Safari belum mendukung propertis singkat tersebut. Berikut adalah link dengan sudut berbentuk air mata:

Buku Catatan si Ugi


Untuk Firefox, saya hanya menggunakan properti tunggal untuk mendefinisikan radiuses untuk semua sudut  (ke 4 sudut), sementara di Safari, saya menggunakan dua spesifik border-radius properties untuk masing masing sudut.

CSS3 border-radius properti berjalan dengan baik saat dipasang  bersama CSS properties lainnya, seperti CSS3 Box Shadows. Box Shadows ini akan mengikuti tepi pada rounded Corners. Contoh di bawah ini adalah sebuah DIV dengan latar belakang gambar dan kedua sudut dibuat rounded ditambah dengan box shadows:



Selesai..