Cara Membuat Gambar Bulat di HTML dan CSS

Cara membuat gambar bulat di HTML itu sangat bisa dilakukan. Namun, tidak hanya mengandalkan HTML saja, kita perlu menambahkan coding CSS juga untuk membuat gambar menjadi bulat. Bagaimanakah caranya? Simak terus pembahasan kali ini sampai akhir.

Gambar bulat atau gambar lingkaran ini biasanya digunakan untuk menampilkan foto user/pengguna. Jika dilihat, foto user/pengguna menjadi lebih pas dan bagus jika dibuat gambar bulat. Kurang cocok rasanya jika menampilkan gambar persegi dibanding foto lingkaran.

Cara termudah untuk membuat gambar lingkaran di HTML adalah dengan mengandalkan CSS terutama CSS3. Salah satu property CSS3 dapat membuat foto menjadi bulat. Ohiya, sudah tahukah Anda property itu apa? jika belum silakan baca di sini

Lantas, property CSS3 apa yang digunakan? Property border-radius yang dapat membuat gambar lingkaran di HTML. Bagaimana caranya? simak penjelasannya berikut ini.

Cara membuat gambar bulat di HTML

1. Buat dua file; index.html dan style.css

File index.html digunakan untuk memasukkan gambar. Sedangkan file style.css digunakan untuk styling gambar tersebut. Letakkan kedua file tersebut dalam satu folder yang sama.


2. Siapkan gambar yang akan diubah

Letakkan gambar tersebut kedalam folder tadi (folder yang berisi file index.html dan style.css). Contohnya, gambar kucing abu-abu seperti berikut ini.

gambar lingkaran css3


3. Isi file index.html dengan coding HTML seperti berikut:

<!DOCTYPE html>
<html>
 <head>
  <title>Rounded Image</title>
  <link href="style.css" rel="stylesheet" /> 
 </head>

 <body>
  <section>
   <img src="image.png" />
  </section>
 </body>
</html>

Code diatas hanya code sederhana. Hanya berisi gambar yang diletakkan pada tag <section>. Tag <section> merupakan salah satu dari tag HTML5. Untuk memasukkan gambar gunakan tag <img> ditambah dengan atribut src yang berisi url/lokasi gambar.

4. Isi file style.css dengan code CSS seperti berikut:

*{ 
 margin: 0;
 padding: 0;
}

body{
 background: #ff4700;
 text-align: center;
}

section{
 margin: 100px auto;
}

section img{
 border-radius: 100%;
 border: 10px solid #fff;
}

Selector * pada baris pertama merupakan CSS reset. Code CSS reset ini bisa disesuaikan dengan kebutuhan Anda seperti apa saja yang ingin diatur ulang. Code diatas hanya mengatur ulang margin dan padding antara browser dengan elemen HTML terluar agar bernilai nol dan lebih pas dalam styling jarak.

Dari code CSS diatas terlihat border-radius diberi value atau nilai sebesar 100%. Artinya, keempat sudut pada gambar memiliki radius sebesar 100%.

5. Hasil akhirnya (before after) akan terlihat seperti berikut.




Tips yang cukup penting untuk Anda agar gambar berbentuk lingkaran yaitu resolusi panjang dan lebar harus sama. Karena jika tidak, gambar gagal menjadi lingkaran dan akan berbentuk oval. Membuat gambar lingkaran cukup mudah bukan?

Sekian pembahasan cara membuat gambar bulat di HTML dengan bantuan CSS3 ini. Semoga bisa Anda ikuti dengan mudah sehingga Anda berhasil mengubah foto menjadi lingkaran dan semoga bisa ada manfaatnya untuk Anda.