Di bawah ini kita akan mempelajari cara membuat gambar bulat dan melingkar(Rounded Images) dengan CSS.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> img { border-radius: 50%; } </style> </head> <body> <h2>Rounded Images</h2> <img src="https://dosenit.com/wp-content/uploads/2020/10/140185_1234217273488_400_300.jpg" alt="Avatar" style="width:200px"> </body> </html>
Cara Membuat Gambar Bulat
Langkah 1) Tambahkan HTML:
Contoh
<img src="https://dosenit.com/wp-content/uploads/2020/10/140185_1234217273488_400_300.jpg" alt="Avatar">
Langkah 2) Tambahkan CSS:
Gunakan properti border-radius untuk menambahkan sudut membulat ke gambar. 50% akan membuat gambar melingkar:
Contoh
img {
border-radius: 50%;
}