Membuat Rounded Corner Menggunakan CSS

Buat kita yang baru memulai belajar tentang web development atau pembuatan web terkadang kita membutuhkan sebuah elemen pada website kita yang memiliki corner (sudut) yang membulat atau dalam bahasa trendnya itu rounded corner.

Implementasi rounded corner bisa berbagai macam dari mulai elemen kontainer pada website atau sampai tag cloud, jika pada belajarngoding implementasinya berupa sudut pada container, tag cloud dan avatar penulis. Untuk lebih jelasnya silahkan lihat gambar dibawah ini.

rounded-1

Untuk membuat rounded corner menggunakan CSS sangatlah mudah tapi cara ini hanya bisa support oleh browser yang modern (klo Internet Explorer saya pernah lihat hasilnya). Pada CSS terdapat property yang bernama -webkit-border-radius, -moz-border-radius, border-radius. Berikut ini saya akan jelaskan mengenai hasil dari beberapa property CSS tersebut.

Menggunakan rounded corner pada setiap sudut

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

Script diatas akan menghasilkan elemen yang akan memiliki rounded corner pada setiap sudutnya, untuk lebih jelasnya silahkan lihat pada gambar dibawah ini.

rounded-2

Mengatur sudut tertentu yang menjadi rounded corner

-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 20px;

Pada property diatas terdapat property top-left, top-right, bottom-right, bottom-left sesuai dengan artinya yaitu top-left untuk sudut bagian kiri atas, top right untuk sudut bagian kanan atas, bottom-right untuk sudut bagian bawah kanan, bottom-left untuk sudut bawah bagian kiri. Untuk lebih jelasnya silahkan lihat gambar dibawah ini.

rounded-3

Jika kita lihat pada gambar diatas dari mulai sudur kiri atas sampai kiri bawah memiliki ukuran yang berbeda hal ini sesuai dengan CSS diatas yang kita set untuk kiri atas 5, kanan atas 10, kanan bawah 15, kiri bawah 20.

Gimana apakah sudah mulai paham tentang bagaimana membuat rounded corner menggunakan CSS, sebenarnya ada cara yang lebih mudah dibanding dengan menghapal property diatas (tapi menurut saya kita harus tetap memahami beberapa fungsi dari property diatas), yaitu dengan mengunjungi website border-radius dimana pada website ini kita dapat dengan mudah membuat rounded corner, baik dengan membuat semua sudut atau hanya dengan beberapa sudut saja. Kita tinggal memasukan nilai besaran sudut untuk masing-masing bagian saja.