Cara Membuat Gambar Bulat dengan CSS

Contoh hasil jadi:


Sisipkan gambar ke dalam kode HTML:
<img class="circle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8KQPFOOAtLuF4gkcuETdpWLjpaSX0Rdlf5xtdqmhPJtZdSrxShmgi6pm4K5IV4Aq0x7vKL0Ghrgt6e8RPlhUYvGq7EkN5_7f0iX9h0snK25acXzsFq29zOvvQZz4HAE26LrwREkzCT5k/s1600/Logo+LPIA+embos+Margonda+biru.png"/>

1. ganti teks setelah src= dan di dalam kutip ganda " " dengan url dan gambar yang anda miliki.

Tanpa Menggunakan Border :.circle{ border-radius:100em; opacity:0.5; width:160px; height:160px; }

Border warna warni :
.circle{ border-radius:100em; opacity:0.5; border-top:2px solid #cf2031; border-right:2px solid #0f7dc8; border-bottom:2px solid #2eb31a; border-left:2px solid #eab823; width:160px; height:160px; }

Border 1 Warna
.circle{ border-radius:100em; opacity:0.5; border:2px solid #ddd; width:160px; height:160px; }

Border dengan shadow :
.circle{ width: 300px; height: 300px; border-radius: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px; background: url(http://link-to-your/image.jpg) no-repeat; box-shadow: 0 0 8px rgba(0, 0, 0, .8); -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8); -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8); }


Referensi:
http://bukanportalberita.blogspot.com/
http://potongankalimat.blogspot.com/
http://fandrajuani.blogspot.com/
http://bavotasan.com/

Segera bergabung : - kursus bahasa Inggris - kursus komputer dengan: Lembaga Pendidikan Indonesia Amerika ( LPIA ) LPIA Margonda Jl. Margonda Raya, No.91C (dekat lampu merah flyover pertigaan Arief Rahman Hakim atau depan Autopart Ramanda Depok, sebelah Solite Furniture dan ATTIN TOUR) Kelurahan: Pancoran Mas Kecamatan : Pancoran Mas Kota: Depok Po Box: 16436 Telepon : (021) 7774443