Belajar CSS : Membuat Lengkungan Pada Sudut Gambar dengan border-radius

Membuat lengkungan pada thumbnail dengan border-radius. Tampilan blog sangat penting guna meningkatkan lama view di blog anda, tampilan blog yang indah dapat membuat pengunjung blog betah berlama lama.

Bagi saya tampilan blog yang indah itu diatur berdasarkan warna yang tepat, minimalis, hingga responsive nya suatu template.

Nah di pembelajaran kali ini mungkin masih nyangkut di bidang tampilan blog, dimana kita akan membuat lengkungan di sisi gambar sehingga lebih terkesan soft atau tidak datar.

Cara Membuat Lengkungan Pada Gambar / Image Blog

Tutorial ini saya buat karena ada salah satu blogger meminta bantuan dengan saya untuk membuat lengkungan pada gambar blog miliknya.

Langkah pertama, anda harus tahu dulu kode CSS gambar blog yang mau anda ubah, 

Karena di setiap blog kode CSS nya berbeda beda, jadi anda dapat melihat kode CSS nya dengan cara Klik kanan pada gambar yang akan di ubah >> Pilih inspect elemen

Maka akan muncul di sisi kanan layar anda kode CSS nya.

Sebagai contoh. Anggap saja kode CSS gambar anda seperti ini .thumbnail

Maka Silahkan anda search dulu kode CSS gambar tadi dengan cara ctrl+f lalu masukkan kodenya sebagai contoh anda masukkan .thumbnail

Jika sudah ketemu, tambahkan kode CSS berikut border-radius:5px; di dalam kode CSS gambar anda, sehingga hasilnya akan seperti di bawah ini.

.thumbnail {border-radius:5px; ...........}

Anda bisa mengatur Lebar lengkungannya dengan mengubah kode 5px.

Tanda ........... merupakan kode bawaan dari template anda.

Oke itu saja sedikit pembelajaran singkat dari saya tentang membuat lengkungan pada sisi gambar atau image blog dengan border-radius.