Cara Membuat Gambar Bulat dengan CSS ~ bulung software

Beberapa waktu yang lalu saya merubah template blog ini, dengan bermodal template sederhana saya sedikit melakukan modifikasi, salah satu nya adalah modifikasi pada tampilan gambar thumbnail di halaman awal seperti ini.

Sebenarnya modifikasi yang saya lakukan sangatlah sederhana namun ternyata banyak diantara sobat yang bertanya bagaimana cara membuat gambar menjadi bulat seperti itu.

Sebenarnya caranya sangatlah mudah, hanya 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...!!!

Terima kasih telah membaca artikel tentang Cara Membuat Gambar Bulat dengan CSS di blog bulung software jika anda ingin menyebar-luaskan artikel ini dimohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silahkan bookmark halaman ini di web browser anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.

Cara Membuat Gambar Bulat dengan CSS

Artikel terbaru :