Bagaimana cara membuat gambar bulat di HTML? Caranya, yaitu dengan menambahkan kode CSS. Simak langkah-langkahnya berikut ini.
Salah satu property CSS3 dapat mengubah gambar persegi menjadi lingkaran. Sudah tau property itu apa? jika belum silakan baca property CSS terlebih dahulu. Property apa yang dipakai? Property border-radius.
Cara membuat gambar bulat di HTML
Seperti yang sudah disebutkan di awal, untuk membuat gambar bulat di HTML itu memerlukan bahasa coding lainn, yaitu CSS. Sehingga, kita akan menyiapkan dua buah file dimana satu file adalah file HTML dan satunya lagi adalah file CSS.
Untuk nama filenya, kita beri nama index.html dan style.css. File index.html digunakan untuk memasukkan gambar, sedangkan file style.css digunakan untuk styling gambar tersebut. Ohiya, letakkan kedua file tersebut kedalam satu folder.
Lalu, siapkan gambar yang akan diubah. Letakkan gambar tersebut kedalam folder tadi (folder yang berisi file index.html dan style.css).
Sekarang kita masuk ke codingannya. Untuk file HTML, berikut isi codingannya.
<!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.
Keempat, 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 diatas hanya mengatur ulang margin dan padding antara browser dengan elemen HTML terluar agar bernilai nol dan lebih pas dalam styling jarak. Atau lebih lengkap bisa menggunakan CSS reset meyerweb.
Dari code CSS diatas terlihat border-radius diberi value atau nilai sebesar 100%. Artinya, keempat sudut pada gambar memiliki radius sebesar 100%.
Agar gambar berbentuk lingkaran, resolusi panjang dan lebar harus sama. Karena jika tidak, akan berbentuk oval.
Cara membuat gambar menjadi bulat di HTML cukup mudah bukan? Coba langsung dipraktikkan tanpa copy-paste codingannya supaya lebih familiar dan paham.
Sekian pembahasan AneIqbal kali ini dan semoga bisa sedikit membantu Anda. Terima kasih sudah membaca sampai akhir.
