Ada masalah dengan alat ini?
Tentang «CSS Border Radius Generator Online»
Alat ini membantu Anda menyusun nilai border-radius dengan pratinjau visual. Gunakan kontrol sudut individual untuk bentuk asimetris, tarik persentase untuk bentuk blob organik, atau pilih dari preset umum (membulat, pil, lingkaran).
Border-radius memberi elemen tepi membulatnya. Di luar pembulatan seragam sederhana, desain modern menggunakan radius eliptik, spesifikasi per sudut, dan bahkan persentase asimetris untuk membuat bentuk organik yang digunakan dalam ilustrasi dan elemen dekoratif.
Output bekerja di konteks CSS apa pun — tombol, kartu, gambar, container. Anda dapat menyalin sebagai shorthand (border-radius: ...) atau longhand untuk setiap sudut tergantung preferensi gaya Anda.
Cara memakai alat ini
Cara merangkai nilai border-radius untuk 4 sudut
Atur tiap sudut
"Top-left", "Top-right", "Bottom-right", "Bottom-left" masing-masing menerima nilai piksel radius sudut tersebut. Urutannya mengikuti shorthand CSS: mulai dari top-left searah jarum jam.
Tekan Jalankan
Hasil: satu field `css` — `<tl>px <tr>px <br>px <bl>px`. Tempel sebagai nilai `border-radius:`. Bila keempatnya sama Anda bisa pakai satu angka, namun alat selalu mengeluarkan bentuk 4 nilai penuh.
Trik asimetri
Sudut yang berbeda membentuk UI umum: chat bubble pakai satu sudut 0 (`12 12 12 0`), tab dua sudut bawah 0, pill button radius besar di kiri+kanan dan 0 di atas+bawah — atau lebih sederhana, nilai sama yang sangat besar seperti `9999`.
Radius elips
CSS juga mendukung radius elips per-sudut via sintaks `tl-x/tl-y` (`12px/24px`) untuk elips asimetris. Alat ini hanya menghasilkan sudut lingkaran (nilai tunggal) — edit manual bila perlu elips.