Suatu ketika mungkin Anda ingin melaksanakan ini:
Saya ingin membuat galeri gambar dengan bentuk bulat dimana terdapat garis batas dengan ketebalan tertentu sebagai frame/bingkai.
Dan inilah yang Anda lakukan:
img { width:160px; height:160px; border:5px solid #E62917; -webkit-border-radius:85px; -moz-border-radius:85px; border-radius:85px; }Anda pikir Anda sudah berhasil alasannya ialah ketika itu Anda sedang memakai peramban Firefox. Sampai lalu Anda mencoba membuka hasil karya Anda pada peramban Chrome atau Opera…
BOOMM!!! Sesuatu menyerupai gambar pertamalah yang akan tampil. Cara terakhir yang biasanya Anda lakukan ialah mencoba untuk membungkus gambar tersebut dengan elemen pemanis (misalnya: <figure>):
figure { width:160px; height:160px; border:5px solid #E62917; -webkit-border-radius:85px; -moz-border-radius:85px; border-radius:85px; overflow:hidden; /* Penting! */ } figure img { width:100%; height:100%; display:block; }Oke, itu memang berhasil, tapi bagaimana jikalau Anda berada dalam keadaan bahwa hanya gambar saja yang diperbolehkan, tidak figure atau yang lain (misalnya: iklan Pay Per Click)?
Gunakan Box-Shadow
Saya pernah menyampaikan sesuatu pada posting ini, bahwa box-shadow juga mempunyai sifat menyerupai halnya border. Cukup dengan memilih ketebalan bayangan, Anda akan berhasil mendapat apa yang Anda inginkan selama ini yang seringkali mengalami kegagalan:
img { width:160px; height:160px; -webkit-border-radius:85px; -moz-border-radius:85px; border-radius:85px; -webkit-box-shadow:0 0 0 5px #E62917; -moz-box-shadow:0 0 0 5px #E62917; box-shadow:0 0 0 5px #E62917; }Tidak ada yang sanggup menjamin mengenai Internet Explorer jikalau ia masih tetap tidak mendukung CSS Box-Shadow, bahkan juga Opera. Jadi, cara terbaik untuk membuat pengaruh ini tetaplah akan dimenangkan oleh metode ke dua.
Edit: Opera 11.62 sudah sanggup menampilkan radius yang sangat tepat pada gambar - 11 April 2012