Generator Jari-jari Lingkaran CSS

Urutan Singkatan

border-radius: top-left top-right bottom-right bottom-left;

Sama seperti margin/padding: dimulai dari sudut kiri atas searah jarum jam. Nilai yang tidak ditentukan mencerminkan nilai di sudut berlawanan; misalnya, border-radius: 10px 20px; berarti 10px di sudut kiri atas dan kanan bawah, serta 20px di sudut kanan atas dan kiri bawah.

Yang tidak dilakukan generator ini

Generator menetapkan satu jari-jari per sudut, jadi ia tidak pernah menghasilkan sudut elips (bentuk dua nilai dengan tanda miring, seperti border-radius: 20px 10px / 5px 15px;) maupun properti panjang seperti border-top-left-radius. Jika membutuhkannya, tulis CSS-nya secara manual.

Persentase versus Pixel

50% pada elemen persegi berbentuk lingkaran. Pada persegi panjang berukuran 200×100, 50% merupakan elips dengan jari-jari horizontal 100px dan jari-jari vertikal 50px.

Bentuk Umum

Aturan “setengah dari tinggi” untuk pil

Tombol pil berbentuk persegi panjang dengan ujung horizontalnya berupa setengah lingkaran sempurna. Untuk memastikan hasil yang akurat, atur nilai border-radius menjadi setidaknya separuh tinggi elemen. Penggunaan 9999px (atau nilai yang sangat besar) juga aman karena peramban akan menyesuaikan jari-jari sesuai geometri aktual.

Interaksi dengan overflow

Secara default, border-radius hanya memotong latar belakang, batas, dan bayangan kotak. Untuk memotong elemen anak (gambar atau elemen terstruktur) ke bentuk bulat, tambahkan:

overflow: hidden;

atau gunakan isolation: isolate + overflow: hidden agar juga mencakup konteks penumpukan.

Catatan Aksesibilitas

Tidak terdapat masalah aksesibilitas pada nilai border-radius itu sendiri; namun, penggunaan pembulatan berlebihan pada elemen interaktif (seperti pil atau chip) sebaiknya tidak menyebabkan area yang harus disentuh menjadi lebih kecil. Tombol harus memiliki ukuran minimal 44×44 piksel (rekomendasi WCAG), terlepas dari jenis pembulatan sudutnya.