Poin penting
- 01Tiga mode — seragam, per-sudut, dan elips — mencakup segalanya dari tombol bulat sederhana hingga bentuk blob organik.
- 02Mendukung unit px, %, dan rem, masing-masing dengan perilaku penskalaan berbeda.
- 03Mode elips mengekspos radius horizontal dan vertikal per sudut untuk sintaks border-radius CSS penuh.
- 04Pratinjau langsung menggunakan properti CSS asli, jadi apa yang Anda lihat persis apa yang akan dirender browser Anda.
Dari Sudut Bulat Sederhana ke Bentuk Blob Organik
Nilai border-radius empat sudut cukup mudah diketik dari memori — border-radius: 8px. Tetapi setelah Anda memerlukan radius berbeda per sudut, atau Anda menginginkan sintaks elips CSS untuk bentuk organik, singkatan menjadi membingungkan dengan cepat. Bentuk lengkapnya adalah top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y — delapan nilai dalam urutan spesifik.
Generator border-radius Handytool memungkinkan Anda menyeret slider untuk setiap sudut dalam mode apa pun dan melihat bentuk diperbarui secara langsung. Beralih antara px, %, dan rem tanpa menghitung ulang, dan salin deklarasi CSS shorthand atau bentuk panjang yang benar saat selesai.
Cara Mendesain Border Radius
- 01
Pilih mode
Mode seragam menerapkan satu radius ke keempat sudut. Mode per-sudut mengendalikan setiap sudut secara independen. Mode elips menambahkan radius horizontal dan vertikal terpisah per sudut.
- 02
Pilih unit
Pilih px untuk ukuran absolut, % untuk nilai yang diskalakan dengan dimensi elemen, atau rem untuk ukuran yang terikat pada ukuran font root.
- 03
Seret slider
Sesuaikan nilai radius dan tonton elemen pratinjau diperbarui secara langsung. Untuk mode per-sudut, seret slider setiap sudut secara independen.
- 04
Pratinjau bentuk
Kotak pratinjau menerapkan properti border-radius CSS aktual, jadi bentuk yang Anda lihat adalah bentuk yang akan dirender browser Anda.
- 05
Salin CSS
Klik Salin untuk mengambil deklarasi border-radius dan tempel ke stylesheet Anda.
Bentuk Umum dan Kapan Menggunakan Setiap Mode
- 01Tombol pil: mode % seragam, atur ke 50% — selalu pil penuh terlepas dari lebar tombol
- 02Kartu dengan pembulatan halus: mode px seragam, 8–16px — pola UI paling umum
- 03Tag atau label asimetris: mode per-sudut, tajam di satu sisi, bulat di sisi lain
- 04Avatar lingkaran: mode % seragam, 50% — diskalakan dengan wadah gambar
- 05Bentuk blob organik: mode elips dengan nilai X/Y berbeda per sudut
Pratinjau Instan, Tidak Ada yang Diunggah
Generator border-radius sepenuhnya di sisi klien. Slider, saklar mode, dan perubahan unit semuanya memperbarui pratinjau secara langsung tanpa roundtrip server. Tidak ada akun dan tidak ada batasan kecepatan.
Alat ini bekerja di semua browser modern. Properti border-radius — termasuk sintaks elips X/Y — didukung di setiap versi evergreen Safari, Firefox, Edge, dan Chrome, jadi output aman digunakan tanpa vendor prefix atau fallback.
FAQ Generator Border-Radius
Apa perbedaan antara px dan % untuk border-radius?
Radius piksel bersifat absolut — 16px selalu 16px. Radius persentase relatif terhadap dimensi elemen, jadi 50% membuat lingkaran sempurna pada kotak persegi dan elips pada persegi panjang.
Kapan saya harus menggunakan mode elips?
Gunakan mode elips ketika Anda menginginkan sudut yang melengkung lebih banyak di satu sumbu — untuk pil horizontal, bentuk daun, atau blob organik. CSS menyatakannya sebagai X-radii / Y-radii dalam shorthand border-radius.
Mengapa radius persentase saya terlihat salah pada kotak non-persegi?
Persentase horizontal relatif terhadap lebar elemen; persentase vertikal terhadap tingginya. Pada elemen lebar dan pendek, sudutnya membentang menjadi elips daripada busur melingkar.
Apakah output berfungsi di setiap browser?
Ya — border-radius termasuk sintaks elips didukung di setiap browser modern: semua versi evergreen Safari, Firefox, Edge, dan Chrome. Tidak ada vendor prefix yang diperlukan.
Bagaimana cara membuat lingkaran sempurna dengan border-radius?
Atur semua sudut ke 50% dalam mode persentase pada elemen persegi. Elemen juga perlu lebar dan tinggi yang sama — gunakan aspect-ratio: 1 / 1 jika ukurannya dinamis.