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: 180px;" />

Penjelasan

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

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

Contoh gambar yang tidak membentuk lingkaran 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.

Diposting oleh :

Nara Kamis, 30 Oktober 2014

Share it :