Cara Membuat gambar menjadi bulat di HTML menggunakan CSS

 

    Pada tutorial kali ini akan menjelaskan tentang membuat gambar yang ditampilkan di HTML menjadi bulat / circle / rounded dengan menerapkan nilai di CSS nya.

Caranya gampang banget, cukup terapkan nilai border radius di CSS untuk gambar yang bersangkutan seperti ini:

img {
     border-radius: 50%;
}

Code diatas langsung memanggil tag img (gambar) nya, bisa juga diubah misalnya memanggil nama class / id gambar tersebut (jika menggunakan class / id).

Cara Membuat gambar bulat di HTML CSS

     Ada hal yang perlu diketahui untuk membuat gambar bulat yang rapih melingkar dan tidak gepeng atau malah menjadi oval, pastikan gambar yang dieksekusi memiliki ukuran square (rasio 1:1). Dengan ukuran square / kotak maka gambar tersebut akan menjadi bulat ketika diberi nilai border radius 50%.



Tips lain, membuat / mengedit gambar yang sudah ada ke ukuran square terlebih dahulu bisa saja buang-buang waktu apa lagi kalo gambarnya banyak. Aplikasi pengedit gambar sekelas Photoshop pun tidak bisa mempercepat keadaan ini, caranya silahkan tentukan ukuran gambar yang ada menjadi square di CSS nya. Cara ini lebih cepat, lebih praktis tidak perlu mengedit gambar yang sudah ada. Pada CSS tentukan lebar dan tinggi gambar yang bersangkutan dengan nilai yang sama misalnya:

img {
   width: 350px;
   height: 350px;
   border-radius: 50%;
}

Dengan begini, gambar (bukan ukuran square) yang sudah kalian miliki akan berubah menjadi square terlebih dahulu kemudian dibulatkan dengan border radius. Lebih praktis, tidak perlu mengedit gambarnya itu buang-buang waktu karena harus buka tutup aplikasi.

Save dan lihat hasilnya di browser, keren !

Setiap gambar yang memiliki ukuran besar / ukuran lain selain rasio 1:1 kemudian diubah ke ukuran square di CSS nya tentu akan merubah tampilannya dan terlihat kurang menarik karena dipersempit dan terlihat tidak bagus tidak seperti semula ketika berukuran besar, lebih amannya setelah membaca tutorial ini kalian dapat menyediakan gambar ukuran square sebelum ditampilkan di HTML.

Selamat mencoba !

Share this post