Cara Membuat Gambar Bulat dengan CSS yaitu dengan membuat beberapa baris Code CSS saja, seperti di bawah ini.
Mengunakan Border warna warni
.bulat{
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;
}
Tanpa Menggunakan Border
.bulat{
border-radius:100em;
opacity:0.5;
width:160px;
height:160px;
}
Menggunakan Border 1 Warna
.bulat{
border-radius:100em;
opacity:0.5;
border:2px solid #ddd;
width:160px;
height:160px;
}
Jika sobat ingin menerapkannya di blogger, begini caranya
Masuk ke Blogger => Template => Edit HTML
Kemudian pastekan salah satu code CSS di atas sebelum tag </style>
Kemudian save template.
Dan setiap sobat menampilkan gambar maka cukup tambahkan class bulat, contohnya seperti ini
<img class="bulat" src="LINK GAMBAR SOBAT" />
Catatan :
Untuk merubah ukuran gambar sobat tinggal mengganti value pada bagian width dan height namun ukurannya harus sama, jika width="120px" maka height juga harus 120px
Selamat Mencoba...!!!
