Membuat Gambar Membulat / Membentuk Lingkaran Menggunakan Border-Radius

Close
Hai Sobat Blogger!, pada postingan kali ini Saya membuat tutorial yaitu cara membuat gambar membulat atau membentuk lingkaran. Langsung saja berikut ini cara membuatnya.

Contoh gambar yang tidak menggunakan style border-radius

Membuat Gambar Membulat

Script/Kode
<img src="https://www.facebook.com/images/fb_icon_325x325.png" style="height: 100px;" />

Penjelasan
"https://www.facebook.com/images/fb_icon_325x325.png" ganti dengan link gambar yang ingin kita gunakan.

Membuat Lingkaran Penuh

Contoh gambar yang menggunakan style border-radius
Membuat Gambar Membulat

Script/Kode
<img src="https://www.facebook.com/images/fb_icon_325x325.png" style="border-radius: 50px; height: 100px;" />
<img src="https://www.facebook.com/images/fb_icon_325x325.png" style="border-radius: 70px; height: 140px;" />
<img src="https://www.facebook.com/images/fb_icon_325x325.png" style="border-radius: 90px; height: 180px;" />


Penjelasan
Contoh gambar diatas memiliki tinggi 100px, untuk membuat gambar berbentuk lingkaran penuh harus menggunakan ukuran border-radius setengah atau lebih dari ukuran tinggi (height) atau lebar (width). Maka penulisan style nya : "border-radius : 50px;" jika menggunakan gambar berukuran tinggi dan lebar 100px.


Membuat Lingkaran Tidak Penuh

Script/Kode
<img src="https://www.facebook.com/images/fb_icon_325x325.png" style="border-radius: 40px; height: 100px;" />
<img src="https://www.facebook.com/images/fb_icon_325x325.png" style="border-radius: 60px; height: 140px;" />
<img src="https://www.facebook.com/images/fb_icon_325x325.png" style="border-radius: 80px; height: 180px;" />

Penjelasan
Gambar tidak membentuk lingkaran penuh karena ukuran border-radius tidak mencapai setengah atau lebih dari ukuran tinggi dan lebar.


Demikianlah artikel Membuat Gambar Membulat / Membentuk Lingkaran Menggunakan Border-Radius ini. Semoga bermanfaat.

Terimakasih telah berkunjung dan membaca artikel di Blog ini. Tinggalkan kritik, saran, dan pertanyaan pada kolom komentar.