Border Radius CSS3, Membuat Rounded Corner Tanpa Image

Jika melihat kotak-kotak pada website ini, kami membuat setiap pojok dari kotak tersebut menjadi lengkung. Inilah yang disebut dengan rounded corner. Di CSS3 hal ini dapat dilakukan dengan mudah, tapi di CSS sebelumnya Anda mungkin perlu menyisipkan gambar/image untuk memanipulasinya. Nah, melanjutkan tutorial dari CSS3, kali ini mari kita coba buat rounded corner menggunakan CSS3.

Untuk membuat rounded corner adalah menambahkan border-radius diobjeknya. Berikut sintaknya:

1. border-[top/bottom]-[left/right]-radius: [value];
2. -moz-border-radius-[top/bottom][left/right]: [value];
3. -webkit-border-[top/bottom]-[left/right]-radius: [value];

Untuk baris pertama dipakai oleh Internet Explorer (ref: versi 9) dan Opera (ref: versi 10), baris kedua adalah untuk Mozilla Firefox dan baris ketiga adalah untuk Google Chrome dan Safari (ref: versi 5). Properti untuk top/bottom atau left/right hanya dipakai jika memang diperlukan.
Bingung? Let's make it easier with examples...

Contoh 1

1. -moz-border-radius: 2em;
2. -webkit-border-radius: 2em;
3. border-radius: 2em;

WZ-87

Contoh 2

1. -moz-border-radius-topright: 2em;
2. -moz-border-radius-topleft: 2em;
3. -webkit-border-top-right-radius: 2em;
4. -webkit-border-top-left-radius: 2em;
5. border-top-right-radius: 2em;
6. border-top-left-radius: 2em;

WZ-87

Contoh 3

1. -moz-border-radius: 2em 0;
2. -webkit-border-radius: 2em 0;
3. border-radius: 2em 0;

WZ-87

Dari contoh di atas, nilai pertama adalah kiri atas dan kanan bawah, nilai kedua adalah kanan atas dan kiri bawah. Nilai (value) dari border radius di hitung mulai dari kiri atas (top-left) dan memutar searah jarum jam. Lihat contoh 4.

Contoh 4

1. -moz-border-radius: 1em 3em 1em 3em;
2. -webkit-border-radius: 1em 3em 1em 3em;
3. border-radius: 1em 3em 1em 3em;

WZ-87

Contoh 5

1. -moz-border-radius: 35px;
2. -webkit-border-radius: 35px;
3. border-radius: 35px;

Untuk saat ini, Safari dan Chrome atau browser webkit base, border-radius dan -webkit-border-radius adalah sama, jadi Anda cukup menuliskan border-radius saja. Tapi untuk Mozilla Anda masih harus menambahkan -moz-border-radius.
Ada yang punya referensi lain? Mari diskusikan disini.

Bonus Track!

Ada tambahan property yang bisa digunakan untuk menambahkan efek pada objek di CSS3. Kita langsung lihat contoh.

Rotasi (Rotate)

1. -moz-border-radius: 1em;
2. border-radius: 1em;
3. -moz-transform: rotate(-5deg);
4. -webkit-transform: rotate(-5deg);

A

Skew

1. -moz-border-radius: 1em;
2. border-radius: 1em;
3. -moz-transform: skew(5deg,5deg);
4. -webkit-transform: skew(5deg,5deg);

B

 
Sumber