Membuat Avatar Dengan Bentuk Lingkaran Dengan CSS

Jika anda sedang menggunakan Google+  maka anda dapat melihat avatar anda berbentuk lingkarang, bukan persegi atau persegi empat. Jadi bagaimana cara membuatnya? Dengan CSS3 anda bisa membuatnya dengan sangat mudah. Cukup dengan property border-radius


Pertama tentukan terlebih dahulu lebar dan tinggi dari avatar yang anda gunakan. Kemudian tambahkan property border-radius  sebesar setengah dari lebar atau tinggi dari gambar avatar yang anda gunakan. Misalkan anda memiliki gambar avatar dengan ukuran 300px X 300 px. Jadi anda hanya perlu menambahkan property border-radius dengan ukuran 150px untuk setiap sudutnya.

.avatar
{ 
border-radius: 150px; 
-moz-border-radius: 150px; 
-webkit-border-radius: 150px; 
} 

Selamat Mencoba