Border Radius Generator

Tentang alat ini

Properti border-radius membulatkan sudut elemen. Ketika keempat nilai sama, digunakan penulisan singkat dengan satu nilai. Nilai berbeda membuat bentuk asimetris — pil menggunakan 50% di semua sudut, daun menggunakan 0% dan 50% bergantian.

Klik nomor sudut untuk mengetik nilai secara langsung, atau seret slider terhubung untuk mengubah keempat sudut sekaligus. Nonaktifkan Kunci semua sudut untuk mengontrol setiap sudut secara independen.

Cara penggunaan

1. Masukkan nilai di empat kolom sudut (kiri-atas, kanan-atas, kiri-bawah, kanan-bawah).
2. Aktifkan Kunci semua sudut untuk mengatur keempat nilai sekaligus dengan slider.
3. Beralih antara satuan px dan % sesuai kebutuhan desain.
4. Klik preset (Pil, Daun, Blob, dll.) untuk menerapkan bentuk yang telah ditentukan secara instan.

Kasus penggunaan

Desainer UI menggunakan border-radius untuk membuat tombol, kartu, dan bentuk avatar. Pengembang menyesuaikan sudut bulat untuk sistem desain merek. Bentuk pil (50%) umum digunakan untuk tag dan lencana. Nilai asimetris menciptakan bentuk organik daun atau blob untuk elemen dekoratif.

Pertanyaan umum

• Apa perbedaan antara px dan %? — px memberikan radius sudut tetap terlepas dari ukuran elemen. % relatif terhadap lebar dan tinggi elemen — 50% di semua sudut menghasilkan lingkaran sempurna (jika elemen berbentuk persegi).
• Bisakah saya mengatur radius berbeda untuk setiap sudut? — Bisa. Hapus centang Kunci semua sudut dan ketik nilai berbeda di setiap kolom sudut.
• Apa arti output singkat? — Ketika keempat sudut sama, output adalah nilai tunggal. Jika berbeda, urutan CSS adalah: kiri-atas, kanan-atas, kanan-bawah, kiri-bawah.