Generator CSS Border Radius Online Gratis
Buat border-radius CSS secara visual. Kontrol keempat sudut secara independen.
Who uses the Generator CSS Border Radius?
- Developer front-end yang membuat nilai border-radius untuk komponen sistem desain.
- Desainer UI yang menguji opsi kemembulatan sudut untuk mendapatkan bobot visual yang tepat.
- Pemula CSS yang mempelajari properti border-radius melalui visualisasi interaktif.
How the Generator CSS Border Radius works
Gunakan slider untuk mengatur radius masing-masing dari empat sudut secara independen.
Centang "Link all corners" agar keempat slider bergerak bersamaan untuk hasil sudut membulat yang seragam.
Pratinjau bentuknya secara real-time pada elemen kartu contoh.
Salin nilai CSS border-radius yang dihasilkan untuk langsung digunakan di stylesheet Anda.
Tips & tricks
- Hapus centang "Link all corners" untuk membuat sudut asimetris — berguna untuk balon percakapan atau bentuk bergaya tab.
- CSS yang dihasilkan hanya menggunakan satu nilai radius per sudut (border-radius: TL TR BR BL) — untuk sudut elips, edit manual nilai yang disalin menggunakan sintaks garis miring.
- Urutan sudut dalam singkatan CSS selalu dimulai dari kiri-atas dan berlanjut searah jarum jam — sesuai urutan label slider di alat ini.
- Nilai radius yang sangat besar pada elemen kecil akan mencapai batas visual begitu sudut-sudutnya bertemu di tengah.
Frequently Asked Questions
Apa sintaks singkat untuk CSS border-radius?
Satu nilai: border-radius: 8px (semua sudut sama). Empat nilai: border-radius: 10px 20px 30px 40px (kiri-atas, kanan-atas, kanan-bawah, kiri-bawah, searah jarum jam). Dua nilai: border-radius: 10px 20px (kiri-atas+kanan-bawah, kanan-atas+kiri-bawah).
Bagaimana cara membuat lingkaran sempurna dengan CSS?
Atur border-radius: 50% pada elemen persegi (lebar dan tinggi sama). Pada elemen yang bukan persegi, 50% akan membentuk elips. Untuk lingkaran, gunakan border-radius: 50% pada div dengan lebar dan tinggi yang sama.
Apa itu sudut elips?
CSS border-radius mendukung radius horizontal dan vertikal terpisah untuk setiap sudut menggunakan sintaks 8 nilai: border-radius: 10px 40px / 40px 10px menghasilkan bentuk "blob" organik. Alat ini tidak menghasilkan sintaks tersebut — alat ini hanya mengontrol satu nilai radius per sudut.
Bisakah saya membuat bentuk "blob" organik dengan border-radius?
Bisa, dengan menulis manual sintaks 8 nilai CSS lengkap (radius horizontal dan vertikal berbeda untuk setiap sudut). Alat ini mencakup kasus yang lebih umum yaitu satu radius per sudut; untuk sudut elips/blob, edit manual nilai yang disalin.
Nilai berapa yang menghasilkan sudut membulat khas "kartu"?
4–8px adalah standar untuk kartu yang halus. 12–16px umum digunakan pada kartu UI modern. 24px atau lebih digunakan untuk elemen bergaya "pil" atau "tag". Nilai mendekati 50 pada kartu kecil mulai terlihat berlebihan.
Is my data safe when using the Generator CSS Border Radius?
Completely safe. The Generator CSS Border Radius processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the Generator CSS Border Radius output in commercial projects?
Yes. The Generator CSS Border Radius is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the Generator CSS Border Radius follow official standards?
Yes. The Generator CSS Border Radius is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.