Cara membuat gambar menjadi Bulat(circle),Round menggunakan W3.CSS pada html

Assalamualaikum wr,wb.Ketemulagi dengan saya di artikel yang sederhana ini,dimana saya akan menjelaskan bagaimana cara membuat gambar/img menjadi bulat(circle),ngeround.
Apa itu W3.CSS ?

W3.CSS adalah  framework  CSS modern dengan ketanggapan built -in (sudah  terintegrasi).    Lebih kecil dan lebih cepat dari   framework CSS lainnya .     Mudah untuk  dipelajari , dan lebih mudah digunakan daripada framework CSS lainnya .   Hanya menggunakan  CSS standar  tanpa jQuery atau JavaScript library  .     Mempercepat aplikasi HTML seluler .     Memberikan  kesetaraan CSS untuk semua perangkat  seperti  pc , laptop , tablet , dan ponsel. 
Untuk  tutorial   ini pertama-tama download  dulu  frameworknya di sini  http://www.w3schools.com/lib/w3.css
Jika sudah di download  mari kita praktekan..
Seperti biasa kita buat script HTML dulu lihat gambar dibawah..!

Seperti  agan-agan  lihat ,saya memberikan  nama  file htmlnya   "gambarbulat"  atau terserah agan-agan.
langkah selanjutnya  mengelinkkanya lihat  gambar dibawah..!

langkah selanjutnya  memasukan gambar yang ingin dibuat bulat/bundar  lihat gambar dibawah.!

Hasilnya.

Nah hasil dari  pemanggilan gambar  sudah selesai dan hasilnya  tidak bualt/bundar.
Inilah fungsi dari W3.CSS  hanya menggunakan atribut "Class"  lebih singkat kodingnya dan mudah.
Sekarng  kita   tambahkan atribut  "Class" didalam tag "img"  coba lihat  gambar dibawah dibawah ini..!

 coba agan-agan perhatikan gambar  koding yang saya lingkari dengan warna merah,disitu saya  menggunakan atribut "class" dan valuenya"w3-circle" dimana  atribut "class" memanggil fungsi dari W3.CSS dan value yang kita pakai adalah "w3-circle"  fungsinya membuat bulat/bundar gambar ,lihat  hasilnya dibawah ini..!

 

Naahh kita sudah lihat kan hasilnya gambar diatas mudah bukan? .

Membuat gambar bulat/bundar sudah selesai,sekarang kita buat gambar ngeround,yang hanya dirubah valueny dengan "w3-round-xlarge",lihat gambar dibawah..!

lihat  gambar diatas saya hanya mengubah valuenya dengan"w3-round-xlarge" dan lihat hasilnya dibawah ini..!

Nahhh seperti itulah hasilnya saat dijalnkan di browser.

jika agan-agan tidak puas dengan hasil diatas,saya akan memberikan rekomendasinya calss-classnya.

• w3-circle
• w3-round-small
• w3-round-large
• w3-round-xlarge
• w3-round-xxlarge

dicoba aja semoga bermanfaat atau kunjungi link ini w3schools