Seperti yang kita ketahui, di HTML dapat menampilkan gambar dan disesuaikan gayanya dengan CSS. Sebelumnya pernah dijelaskan tentang penerapan media (gambar, audio, video) di HTML, jadi sekarang saya anggap sudah pada paham cara menerapkan gambar di HTML.

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:

ads by posciety

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).

Tips Membuat Gambar Bulat – 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 !

Masih bingung ? Lihat : Video tutorial cara membuat gambar jadi lingkaran HTML CSS.

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 !