Membuat Gambar Membulat / Membentuk Lingkaran Menggunakan Border-Radius

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



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

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.