MoreLesson 197Preview gratis
Circles
Lesson ini bagian dari How To · Semua level
Ringkasan
Lingkaran di CSS dibuat dari elemen persegi yang sudutnya dilengkungkan penuh dengan border-radius: 50%. Bentuk ini sering dipakai untuk avatar, ikon status, atau angka notifikasi. Agar isi tetap berada tepat di tengah, kombinasikan ukuran lebar dan tinggi yang sama dengan flexbox.
Poin kunci
- Lebar dan tinggi harus sama agar hasil border-radius: 50% benar-benar lingkaran
- Gunakan display: flex dengan align-items dan justify-content center untuk memusatkan isi
- Ukuran lingkaran bisa dibuat responsif dengan clamp() atau aspect-ratio: 1 / 1
- Lingkaran dekoratif sebaiknya tidak mengorbankan kontras teks di dalamnya
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.