I have sufficient information to write the article “Membuat Lingkaran Dengan CSS”.

The search results confirm that the core technique for creating circles is using the border-radius property with a value of 50% or 100% on an element with equal width and height.

I also found information on:

• Creating ovals: This is achieved when the width and height of the element are not equal, or by using two different values for border-radius.
• Creating responsive circles: Techniques include using viewport units (vw, vh) or the aspect-ratio property to maintain the circular shape at different screen sizes. The padding-bottom trick is another method found.
• Use cases: The search results highlight common applications such as avatars, icons, buttons, and decorative elements in UI design.
• Detailed border-radius syntax: I found explanations on how to use one, two, three, or four values with border-radius to control each corner individually, and even how to create elliptical corners using the slash (/) syntax.

This information is comprehensive enough to structure a detailed article that starts with the basics, explains variations like ovals and responsive circles, and provides practical examples, as initially planned. No further searches are needed.

Dalam desain web modern, kita tidak lagi terbatas pada layout kotak yang kaku. Bentuk-bentuk geometris seperti lingkaran dan oval dapat menambah sentuhan visual yang dinamis, lembut, dan fokus pada elemen penting. Untungnya, CSS menyediakan properti yang sangat mudah digunakan untuk menciptakan bentuk-bentuk ini tanpa perlu gambar.

Artikel ini akan memandu Anda secara lengkap, mulai dari membuat lingkaran sempurna, bentuk oval, hingga memastikan bentuk tersebut tetap proporsional di berbagai ukuran layar.

Kunci Utama: Properti Ajaib border-radius

Rahasia untuk mengubah elemen kotak menjadi lingkaran terletak pada satu properti CSS: border-radius. Properti ini pada dasarnya berfungsi untuk melengkungkan sudut-sudut sebuah elemen. Jika kita melengkungkan sudut-sudut tersebut secara maksimal, maka bentuk kotak akan berubah menjadi lingkaran.

Syarat untuk membuat lingkaran sempurna ada dua:

1. Elemen tersebut harus memiliki lebar (width) dan tinggi (height) yang sama, membentuk bujur sangkar.
2. Nilai border-radius diatur menjadi 50%.

Nilai 50% akan membuat lengkungan setiap sudut mencapai titik tengah sisi elemen, sehingga bertemu dengan sempurna dan membentuk lingkaran. Menggunakan nilai lebih dari 50% (misalnya 100%) akan memberikan hasil yang sama.

Langkah 1: Membuat Lingkaran Sederhana

Mari kita mulai dengan membuat sebuah div dan mengubahnya menjadi lingkaran.

HTML:

<div class="lingkaran"></div>

CSS:

.lingkaran {
  width: 150px;
  height: 150px;
  background-color: #3498db; /* Warna biru sebagai contoh */
  border-radius: 50%;
}

Dengan kode di atas, Anda akan mendapatkan sebuah lingkaran biru sempurna dengan diameter 150 piksel.

Langkah 2: Membuat Bentuk Oval

Bagaimana jika kita menginginkan bentuk lonjong atau oval? Caranya lebih mudah dari yang dibayangkan. Anda hanya perlu memastikan lebar dan tinggi elemen tidak sama.

HTML:

<div class="oval"></div>

CSS:

.oval {
  width: 200px; /* Lebar lebih besar dari tinggi */
  height: 100px;
  background-color: #e74c3c; /* Warna merah sebagai contoh */
  border-radius: 50%;
}

Properti border-radius: 50% akan tetap melengkungkan sudut secara maksimal, namun karena dasarnya adalah persegi panjang, hasilnya akan menjadi sebuah oval.

Anda juga bisa membuat oval dengan memberikan dua nilai pada border-radius, yang merepresentasikan radius horizontal dan vertikal. Contoh: border-radius: 100px / 50px;.

Langkah 3: Menambahkan Konten di Dalam Lingkaran

Lingkaran sering digunakan untuk membingkai konten, seperti teks atau ikon. Untuk memastikan konten tersebut berada tepat di tengah, kita bisa memanfaatkan CSS Flexbox.

HTML:

<div class="lingkaran-dengan-teks">
  <span>OK</span>
</div>

CSS:

.lingkaran-dengan-teks {
  width: 150px;
  height: 150px;
  background-color: #2ecc71; /* Warna hijau sebagai contoh */
  border-radius: 50%;
  color: white;
  font-size: 2em;
  font-weight: bold;
  font-family: sans-serif;

  /* Properti Flexbox untuk menengahkan konten */
  display: flex;
  justify-content: center; /* Menengahkan secara horizontal */
  align-items: center;    /* Menengahkan secara vertikal */
}

Studi Kasus: Membuat Foto Profil (Avatar) Lingkaran

Salah satu penggunaan paling umum dari bentuk lingkaran adalah untuk foto profil atau avatar. Ini memberikan tampilan yang lebih rapi dan modern.

HTML:

<img src="https://via.placeholder.com/200" alt="Foto Profil" class="avatar">

CSS:

.avatar {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover; /* Memastikan gambar mengisi lingkaran tanpa distorsi */
  border: 4px solid #f1c40f; /* Menambah bingkai kuning */
}

Properti object-fit: cover; sangat penting di sini. Tanpanya, jika gambar asli tidak berbentuk bujur sangkar, ia akan terdistorsi menjadi oval agar pas dengan elemen. Dengan object-fit: cover, gambar akan tetap proporsional, mengisi seluruh ruang, dan memotong bagian yang berlebih.

Tantangan: Membuat Lingkaran yang Responsif

Ukuran piksel yang tetap (150px) tidak akan beradaptasi dengan baik di layar yang lebih kecil. Untuk membuat lingkaran yang responsif, kita bisa menggunakan unit viewport (vw) atau properti aspect-ratio.

Metode 1: Menggunakan Viewport Width (vw)

Unit vw merepresentasikan persentase dari lebar viewport (area pandang browser).

.lingkaran-responsif {
  width: 20vw; /* 20% dari lebar viewport */
  height: 20vw; /* Nilai harus sama dengan width */
  background-color: #9b59b6; /* Warna ungu */
  border-radius: 50%;
}

Lingkaran ini akan membesar dan mengecil seiring dengan perubahan lebar browser.

Metode 2: Menggunakan aspect-ratio (Modern)

Properti aspect-ratio adalah cara modern untuk menjaga rasio aspek sebuah elemen. Ini cara yang lebih lugas untuk membuat bujur sangkar responsif, yang kemudian bisa kita ubah menjadi lingkaran.

.lingkaran-responsif-modern {
  width: 30%; /* Lebar relatif terhadap parent element */
  aspect-ratio: 1 / 1; /* Menjaga rasio lebar:tinggi tetap 1:1 */
  background-color: #e67e22; /* Warna oranye */
  border-radius: 50%;
}

Kesimpulan

Membuat lingkaran dan oval dengan CSS adalah teknik dasar yang sangat kuat. Dengan hanya mengandalkan properti border-radius, Anda dapat mengubah elemen kotak yang membosankan menjadi bentuk yang menarik secara visual. Baik untuk membuat tombol, avatar, galeri gambar, atau elemen dekoratif lainnya, menguasai teknik ini akan membuka banyak kemungkinan kreatif dalam proyek desain web Anda.