Generator Border Radius

Cara kerja

Setiap sudut CSS adalah seperempat elips, dan satu kalimat itu menjelaskan sebagian besar properti ini. Pada mode Sederhana satu radius berlaku untuk keempat sudut; pada mode Per-sudut tiap sudut punya radius sendiri; pada mode Blob tiap sudut mendapat radius horizontal dan vertical mandiri, ditulis dengan garis miring — sisi kiri miring adalah empat radius horizontal, sisi kanan empat radius vertikal, keduanya selalu dalam urutan kiri-atas, kanan-atas, kanan-bawah, kiri-bawah.

Anatomi sintaks garis miring

border-radius: 40% 60% 70% 30% / 30% 50% 70% 40% dibaca: radius horizontal KA KT BB KB, lalu radius vertikal KA KT BB KB. Ketika kedua sisi sama, garis miring hilang begitu saja dari shorthand —karena itu generator otomatis menghapusnya. Tiap sudut lalu menggambar seperempat elips dari radius horizontal dan verticalnya sendiri, dan begitulah blob asimetris terbentuk.

50% vs px pada kotak non-bujur

Persentase dihitung per sumbu, jadi 50% pada kotak 240×160 berarti elips 120×80 di tiap sudut —stadion, bukan lingkaran. Radius px tetap sempurna lingkaran apa pun bentuk kotaknya, tetapi harus minimal setengah sisi terpendek agar tampak bulat penuh; nilai lebih besar menghasilkan bentuk sama, dan px sangat besar tidak meluber karena browser menyusutkannya proporsional.

Mengapa 9999px menjadi kapsul

Tombol kapsul dibulatkan dengan radius yang sengaja mustahil: 9999px dipangkas menjadi setengah sisi terpendek — aturan spesifikasinya, bila radius bersebelahan pada satu sisi melebihi panjang sisi itu, semua radius diturunkan dengan faktor sama. Hasil praktisnya: pada kapsul 240×88 tiap sudut menjadi seperempat lingkaran 44px, dua sisi panjang menghilang dan jadilah kapsul. Angka persisnya tidak penting, yang penting besar.

Pertanyaan yang sering diajukan