Cara Menggunakan Properti CSS3 Border-radius

Saya masih ingat tahun 2008 lalu saya ingin sekali membuat pinggiran sebuah kotak di HTML menjadi melengkung, tidak bersudut seperti biasanya. Pada tahun 2008, karena keterbatasan koneksi internet yang masih mahal; saya pun tidak bisa mengetahui seluk beluk mengenai CSS3. Alhasil, saya menggunakan gambar untuk mewakili lengkungan di setiap ujung. Saat itu pun, membuat website dengan teknik slicing Photoshop masih sangat digandrungi. Jadi sah-sah saja mengganti lengkungan itu dengan gambar.

Seiring dengan berjalannya waktu, saya mulai mengenal banyak mengenai CSS, khususnya CSS3. Pada CSS3 fitur lengkungan pada ujung itu dengan nama "border-radius". Fungsinya adalah menggantikan gambar yang biasanya dipakai, menjadi kode sederhana yang bisa diubah nilainya dengan mudah. Berikut ini adalah cara menggunakan properti border-radius.

Cara Menggunakan Properti CSS3 Border-radius

Dalam demo yang saya buat di bawah ini, saya membuat lima persegi dengan lebar dan tinggi 70 piksel. Setelah itu tiap-tiap persegi saya beri nilai border-radius yang berbeda. Secara berturut-turut saya beri nilai 0px, 4px, 8px, 16px, dan 50px.

See the Pen Hfrok by Iskandar Dzulkarnain (@iskael) on CodePen.

Dari demo di atas bisa kamu lihat bagaimana sebuah persegi bisa menjadi sebuah lingkaran apabila nilai dari border-radius-nya melebihi dari setegah tinggi maupun lebar persegi.

Kamu juga bisa melihat kode CSS3 yang saya pakai. Dalam penggunaan border-radius, ada sedikit perbedaan bagi masing-masing browser. Untuk browser Safari, Google Chrome, dan Opera Next; menggunakan properti "-webkit-border-radius". Untuk browser Mozilla Firefox versi lawas menggunakan "-moz-border-radius". Namun, pada Mozilla Firefox terbaru, cukup menggunakan "border-radius" tanpa prefiks "moz" lagi.

Bagaimana, mudah bukan? Jika dibandingkan dengan menggunakan gambar untuk membuat lengkungan pada ujung; menggunakan properti border-radius jauh lebih mudah dan cepat. Ditambah lagi penggunaannya dinamis, tanpa harus memperhitungkan lebar sebuah elemen <div>. Selamat mencoba :)