Cara membuat gambar melingkar dengan CSS

Gambar melingkar di postingan menjadi salah satu trik desain paling sederhana yang efektif untuk membuat blog terlihat modern dan menarik.

Visual yang menarik tidak hanya meningkatkan pengalaman pembaca, tapi juga membuat konten lebih mudah diingat.

Banyak pelaku blogging masih menggunakan gambar kotak atau persegi panjang standar, padahal membulatkan sudut gambar dengan sedikit CSS bisa langsung mengubah tampilan blog menjadi lebih elegan tanpa harus edit gambar satu per satu.

Gambar melingkar adalah border radius

Border-radius adalah properti CSS yang paling sederhana dan efektif untuk optimasi gambar menjadi melingkar di tiap sudut atau beberapa sudut saja.

Menggunakan border-radius, Anda bisa membulatkan sudut gambar sepenuhnya, sehingga terlihat seperti lingkaran, atau membulatkan sebagian sudut sesuai desain yang diinginkan.

1 | Contoh

img {
  border-radius: 10px;
}

CSS tersebut akan membulatkan sudut secara parsial, cocok untuk efek soft-corner.

2 | Mengapa border radius efektif

Border-radius sangat efektif karena sangat mudah dalam penerapan; cukup satu baris kode CSS saja untuk membulatkan gambar di seluruh postingan.

Selain itu, metode ini ringan untuk website karena tidak memerlukan pengeditan gambar secara manual, sehingga loading halaman tetap cepat.

Border-radius juga fleksibel, bisa dikombinasikan dengan border, shadow, atau efek hover untuk membuat gambar lebih menarik.

Keunggulan lainnya adalah responsif; gambar akan otomatis menyesuaikan ukuran tanpa kehilangan bentuk bulatnya, sehingga tampilan tetap konsisten di semua perangkat.

Cara membuat gambar melingkar di WordPress

Membuat gambar melingkar di WordPress bisa kita lakukan dengan beberapa metode, tergantung kebutuhan dan kenyamanan Anda.

Berikut tiga cara yang paling umum dan mudah.

1 | Menggunakan CSS langsung di theme atau customizer

Langkah termudah adalah menambahkan CSS langsung melalui Appearance → Customize → Additional CSS.

Dengan metode ini semua gambar di website bisa kita bikin melingkar sekaligus.

Contoh:

img {
  border-radius: 10px;
}

Kode di atas berlaku untuk semua gambar di website.

Jika ingin membatasi hanya untuk gambar postingan blog (single), gunakan class bawaan WordPress seperti .post img.

.post img {
  border-radius: 10px;
}

Pastikan untuk menggunakan class atau selector yang tepat, agar gambar lain (misal logo atau ikon sidebar) tidak ikut melingkar atau membulat di pojok.

2 | Menggunakan class khusus pada gambar

Jika Anda hanya ingin beberapa gambar tertentu yang melingkar atau tidak runcing, metode paling aman adalah menambahkan class khusus pada gambar.

Langkahnya:

• Edit postingan di WordPress.
• Pilih gambar yang ingin dibulatkan.
• Di panel “Advanced” (Editor Gutenberg), tambahkan class, misal: gambar-bulat.
• Tambahkan CSS di Appearance → Customize → Additional CSS:

.gambar-bulat {
  border-radius: 10px;
}

Hasilnya, hanya gambar dengan class gambar-bulat yang akan melingkar atau tidak runcing di tiap sudut. Serta tidak merusak tampilan gambar lain di website.

3 | Menggunakan page builder atau plugin

Jika menggunakan Elementor, Divi, atau WPBakery, sebagian besar page builder menyediakan opsi visual untuk membuat gambar bulat tanpa menulis kode.

Contoh di Elementor:

• Klik gambar di editor Elementor.
• Buka tab Style → Border Radius.
• Masukkan 10% untuk membuat gambar tidak runcing.

Pastikan hanya mengatur border radius untuk elemen gambar tertentu, bukan seluruh section atau column. Dan, periksa preview responsive agar gambar tetap bulat di semua perangkat.

Cara membuat gambar melingkar di Blogger

Di Blogger, konsepnya mirip dengan WordPress, tapi CSS diterapkan di template/theme atau Custom CSS.

Berikut beberapa metode mudah dan aman.

1 | Menambahkan CSS global di template

Jika ingin semua gambar postingan di blog melingkar, Anda bisa menambahkan CSS global di Theme → Customize → Advanced → Add CSS.

Atau langsung di Edit HTML.

Contoh CSS:

.post img {
  border-radius: 10px;
}

Selector .post img memastikan hanya gambar di postingan yang berubah, bukan gambar sidebar, header, atau ikon lainnya. Anda bisa menyesuaikan dengan selector yang sesuai template Blogger.

2 | Menggunakan class khusus pada gambar

Jika hanya beberapa gambar tertentu yang ingin dibulatkan, Anda bisa menambahkan class secara manual.

• Buka postingan di mode HTML editor.
• Pilih gambar yang ingin dibulatkan, tambahkan class, misal: gambar-bulat:

<img src="gambar.jpg" class="gambar-bulat" />

• Tambahkan CSS berikut di Custom CSS:

.gambar-bulat {
  border-radius: 10px;
}

Pastikan nama class unik agar tidak menimpa style lain di template. Cara ini cocok untuk gambar thumbnail, profil, atau featured image yang ingin tampil berbeda.

3 | Menggunakan inline CSS untuk gambar tertentu

Jika hanya satu atau dua gambar yang ingin dibulatkan, Anda bisa menambahkan CSS langsung di tag <img>.

Contoh:

<img src="gambar.jpg" style="border-radius:10px;" />

Kelebihan:

• Langsung terlihat efeknya tanpa mengubah CSS global.
• Cocok untuk postingan tertentu atau widget khusus.

Kekurangan:

• Tidak scalable untuk banyak gambar, karena harus menambahkan style satu per satu.

Dengan metode CSS global, class khusus, atau inline CSS, Anda bisa membuat gambar melingkar tiap sudut di Blogger secara aman dan tepat sasaran.

Penggunaan class khusus paling direkomendasikan untuk kontrol penuh, sementara CSS global cocok untuk tampilan konsisten di seluruh postingan.

Cara membuat gambar melingkar hanya di sudut tertentu

Jika Anda ingin membuat gambar hanya sedikit melengkung di sudut tertentu, CSS memungkinkan kontrol per sudut menggunakan properti:

• border-top-left-radius → sudut kiri atas
• border-top-right-radius → sudut kanan atas
• border-bottom-left-radius → sudut kiri bawah
• border-bottom-right-radius → sudut kanan bawah

1 | Contoh membulatkan hanya sudut atas

Untuk membulatkan hanya sudut atas kiri dan kanan.

.post img {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

Hasilnya gambar tetap berbentuk kotak di bagian bawah. Cocok untuk thumbnail postingan atau header gambar dengan efek soft-corner di atas.

2 | Contoh membulatkan hanya sudut bawah

Untuk membulatkan hanya sudut bawah kiri dan kanan.

.post img {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

Efek hanya terlihat di bagian bawah gambar. Memberikan tampilan elegan tanpa mengubah sisi atas.

3 | Menggunakan class khusus untuk target tertentu

Jika hanya beberapa gambar tertentu yang ingin diberi efek, gunakan class khusus.

• Tambahkan class di editor WordPress, misal: sudut-atas.

<img src="gambar.jpg" class="sudut-atas" />

• Tambahkan CSS.

.sudut-atas {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

Hasilnya hanya gambar dengan class tersebut yang terpengaruh. Hal yang sama bisa kita buat untuk sudut-bawah jika ingin membulatkan bawah saja.

Gambar melingkar tiap sudut (border radius) untuk apa?

Membulatkan sudut gambar menggunakan border-radius bukan sekadar estetika, tapi juga memiliki manfaat praktis dan UX-friendly.

• Memberikan tampilan lebih modern dan profesional.
• Membuat konten terlihat lebih elegan dan rapi dibanding gambar kotak biasa.
• Gambar dengan sudut melingkar lebih ramah mata dan nyaman dilihat.
• Dapat memandu perhatian pembaca ke konten utama tanpa distraksi.
• Cocok dipadukan dengan tema blog minimalis atau modern.
• Bisa kita pakai untuk featured image, thumbnail postingan, profil penulis, atau banner.
• Efek border-radius murni CSS, jadi tidak menambah ukuran file gambar.
• Tidak mempengaruhi loading page sehingga tetap ramah SEO.
• Bisa kita terapkan ke semua sudut, sudut tertentu, atau dengan variasi radius berbeda.
• Memberikan kreativitas lebih tanpa perlu mengedit gambar secara manual.

Membuat gambar melingkar di postingan blog menggunakan CSS border-radius adalah cara cepat dan fleksibel untuk meningkatkan tampilan blog tanpa menambah beban loading.

Baik menggunakan border-radius global, class khusus, atau inline CSS, Anda bisa menyesuaikan efek melingkar sesuai kebutuhan. Apakah seluruh sudut, hanya sudut atas, atau sudut bawah.

Blog Anda akan terlihat lebih modern, profesional, dan ramah pengguna, sekaligus tetap SEO-friendly karena efek ini murni CSS tanpa menambah ukuran file gambar.

Sekarang, Anda bisa mulai bereksperimen dengan sudut gambar untuk mempercantik tampilan postingan dan menarik perhatian pembaca.

07 Februari 2026 Blog website blog blog pribadi Blogger blogging Rum