Cara Membuat Gambar Bulat dengan CSS

Plasawebsite.com Desember 21, 2017

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...!!!

Tags: Artikel