Generator Border Radius

Geser slider untuk membentuk setiap sudut kotak pratinjau dan salin CSS border-radius yang dihasilkan. Kunci keempat sudut bersamaan untuk persegi panjang dengan sudut membulat sederhana, atau buka kuncinya untuk membuat bentuk pil, bentuk daun, dan bentuk blob asimetris.

Apa Itu Alat Ini?

border-radius adalah properti CSS yang membulatkan sudut sebuah elemen. Jika ditulis manual, properti ini membutuhkan empat nilai dalam urutan tetap — kiri-atas, kanan-atas, kanan-bawah, kiri-bawah — yang mudah tertukar, terutama begitu keempat sudutnya berbeda.

Alat ini menghilangkan tebak-tebakan itu: geser slider, lihat sudutnya membulat di pratinjau langsung, dan baca CSS yang tepat dari kotak kode yang dihasilkan. Satu tombol kunci beralih antara radius seragam (keempat sudut sama, kasus paling umum) dan empat slider independen untuk bentuk organik dan asimetris.

Mengapa Menggunakannya?

Pratinjau langsung diperbarui seketika saat Anda menggeser — tanpa perlu mengedit CSS dan me-refresh untuk melihat hasilnya.
Kunci satu klik untuk kasus umum 'radius sama di setiap sudut'; buka kuncinya untuk tombol pil, gelembung bicara, dan bentuk blob.
Menghasilkan bentuk shorthand nilai tunggal jika semua sudut sama, atau bentuk empat nilai lengkap jika berbeda — siap salin-tempel keduanya.
Berjalan sepenuhnya di peramban Anda. Tidak ada yang Anda masukkan yang dikirim ke mana pun.
Gratis, tanpa pendaftaran, berfungsi di ponsel.

Cara Menggunakan

Biarkan 'kunci semua sudut' tercentang dan geser slider mana pun untuk mengatur satu radius seragam untuk seluruh kotak.
Hilangkan centang kunci untuk mengontrol setiap sudut secara independen — berguna untuk bentuk pil, tetesan air, dan kartu asimetris.
Perhatikan kotak pratinjau diperbarui secara langsung saat Anda menyesuaikan setiap slider.
Salin CSS yang dihasilkan dari kotak kode dan tempelkan ke stylesheet Anda.

Contoh

Input

Kiri-atas: 40px, Kanan-atas: 8px, Kanan-bawah: 40px, Kiri-bawah: 8px

Output

border-radius: 40px 8px 40px 8px;

Sudut berseberangan yang tidak sama seperti ini menciptakan siluet daun atau kelopak — efek umum dalam desain kartu dan lencana.

px atau % — satuan mana yang sebaiknya digunakan?

Generator ini menghasilkan nilai piksel, yang merupakan default tepat untuk sebagian besar pekerjaan UI: tombol, kartu, dan input di mana Anda ingin radius sudut yang tetap dan bisa diprediksi terlepas dari ukuran elemennya.

Persentase berperilaku berbeda — nilainya relatif terhadap lebar dan tinggi elemen itu sendiri, jadi radius 50% pada elemen persegi menghasilkan lingkaran sempurna, dan pada elemen tidak persegi menghasilkan elips. Jika Anda menginginkan efek itu (avatar, bentuk blob yang menyesuaikan skala kontainer), ambil CSS yang dihasilkan dan ganti nilai px dengan nilai % secara manual — misalnya border-radius: 50% mengubah kotak persegi apa pun menjadi lingkaran.

Pola border-radius umum

Kartu membulat: semua sudut sama, sekitar 8-16px untuk komponen UI.
Tombol pil: atur radius setengah dari tinggi elemen (atau cukup gunakan 9999px, yang akan otomatis membentuk pil penuh terlepas dari tingginya).
Avatar lingkaran: border-radius: 50% pada elemen persegi (lebar dan tinggi sama).
Gelembung bicara: tiga sudut membulat, satu sudut tajam — atur tiga slider tinggi dan satu ke 0.
Bentuk daun/kelopak: sudut berseberangan sama, sudut bersebelahan berbeda — misalnya kiri-atas dan kanan-bawah sama-sama besar, kanan-atas dan kiri-bawah sama-sama kecil.

Memadukan dengan bayangan

Sudut membulat jarang muncul sendirian — kartu dan tombol biasanya juga butuh sedikit bayangan untuk kedalaman. Gunakan Generator Box Shadow untuk menyetel bayangan drop shadow dan terapkan kedua bagian CSS yang dihasilkan pada elemen yang sama.

→ Generator Box Shadow · Konverter Satuan

Pertanyaan yang Sering Diajukan

Apa perbedaan antara border-radius dan urutan sudutnya?

Shorthand CSS selalu mengikuti urutan kiri-atas, kanan-atas, kanan-bawah, kiri-bawah, searah jarum jam mulai dari kiri-atas. Keempat slider alat ini diberi label sesuai urutan tersebut, jadi Anda tidak perlu mengingat urutannya sendiri.

Bisakah saya menggunakan satuan berbeda untuk setiap sudut?

Bisa, dalam CSS sungguhan Anda bisa mencampur px, %, em, dan rem di seluruh sudut, meski jarang dipakai dalam praktiknya. Alat ini menghasilkan nilai px seragam untuk kesederhanaan — ganti nilai tertentu ke % atau satuan lain langsung di stylesheet Anda jika Anda butuh satuan campuran.

Mengapa border-radius: 50% kadang menghasilkan oval alih-alih lingkaran?

Karena persentase relatif terhadap masing-masing sumbu secara independen — radius horizontal adalah persentase dari lebar elemen, radius vertikal persentase dari tingginya. Pada elemen persegi (lebar dan tinggi sama) itu menghasilkan lingkaran sempurna; pada persegi panjang menghasilkan elips.

Apakah border-radius memengaruhi gambar latar dan border juga?

Ya — border-radius memotong latar belakang, border, dan (pada peramban modern) box-shadow elemen sesuai bentuk membulat tersebut. Ini tidak memotong konten anak yang meluber kecuali Anda juga mengatur overflow: hidden pada elemen induk.

Apakah ada batas seberapa besar radius bisa diatur?

Tidak ada batas keras — jika radius melebihi setengah lebar atau tinggi elemen, peramban akan membatasinya sehingga kedua kurva di sisi itu bertemu tepat di tengah, itulah cara sebuah persegi menjadi lingkaran sempurna atau bentuk pil.