Cara membuat rounded images dengan menggunakan CSS

Ketika kita membuat sebuah aplikasi baik itu aplikasi desktop, web, maupun mobile, biasanya kita dihadapkan pada kasus untuk membuat image yang berbentuk bulat (rounded image). Salah satu contoh image/gambar bulat biasa digunakan pada profile picture, atau kadang disebut dengan avatar. Profile picture ini identik dengan photo yang berbentuk lingkaran. Beberapa contoh rounded images adalah sebagai berikut:

Untuk dapat membuat image seperti itu, kita menggunakan HTML yang tentunya di integrasikan dengan CSS. Untuk memudahkan pada CSS bisa memasukan class berikut ini:

.img-rounded {
    border-radius: 50%;
}

kemudian di html kita masukan class yang telah kita buat. Untuk memudahkan masukan code berikut di html:

<img class="img-rounded" src="img/profile.jpg" />
<img class="img-rounded" src="img/background.jpg" />

Hasil yang diperoleh adalah sebagai berikut:

Saya memberikan dua contoh rounded yang digunakan. image yang pertama yaitu profile.jpg memiliki dimensi yang sama yaitu 400 pixel x 400 pixel sehingga ketika kita memanggil class="img-rounded" maka secara otomatis akan berubah menjadi image berupa lingkaran penuh. Namun pada image yang kedua yaitu background.jpg dimensi nya berbeda yaitu 500 pixel x 281 pixel. sehingga ketika kita panggil class="img-rounded" hasil yang didapatkan adalah image berbentuk oval. 

Jika anda memerlukan image dimensi berapapun dipaksa untuk menjadi sebuah image yang berbentuk lingkaran itu sangat mudah sekali. kita bisa menambahkan nilai pada css yang kita buat menjadi seperti berikut ini:

.img-rounded {
    border-radius: 50%;
    width: 300px;
    height: 300px;
}

dan tampilan akan berubah menjadi seperti ini:

Demikian semoga bermanfaat.